2021-05-01 css颜色样式的获取和使用

最新推荐文章于 2025-01-19 08:07:09 发布

前端OnTheRun

最新推荐文章于 2025-01-19 08:07:09 发布

阅读量984

点赞数

分类专栏： css 文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/116331443

版权

css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了CSS颜色样式的获取和使用方法，包括颜色的英文单词、16进制和rgb/rgba设置方式。重点讲解了如何利用rgba实现盒子的遮罩效果，以及如何通过16进制生成随机颜色的函数封装。涉及到的技术点有:hover伪类、绝对定位、随机数生成以及进制转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css颜色样式的获取和使用

1.获取颜色有三种设置方式:

第一种是颜色的英文单词,如red,blue等
第二种是用16进制设置,如#00FD42等
第三种是用rgb或rgba设置,如rgb(255,255,0)或rgba(55,41,201,0.5)
其中:
rgb分别对应的是red,green,blue,取值0~255
a是透明度样式,取值范围0~1(涉及到色光三原色)

没啥用的tip:可以利用调色原理获得想要的颜色
比如红色和绿色可以调出黄色,
所以黄色可以用rgb(255,255,0)表示

2.利用获取颜色的rgba方式可以实现一个盒子的遮罩效果:
鼠标移入前;图片被一个等宽高的半透明空盒子遮住;
鼠标移入后:改变其透明度,图片恢复明亮
需要用到的知识点有:
鼠标移入:hover,绝对定位position
代码如下:

        img,div{
            width: 400px;
            height: 400px;
        }
        div{
            position: absolute;
            background-color: rgba(238,139,238,.5);
        }
        div:hover{
            background-color: rgb(238,139,238)
            transition: 3s;
        }

输出效果:
鼠标移入前:
在这里插入图片描述

鼠标移入3s(透明度渐变):
在这里插入图片描述

3.利用获取颜色的16进制设置方式可以实现获取随机颜色的函数封装
需要用到的知识点有:
获取随机数random,数组方法:行尾添加push,for循环,进制转化的函数:tostring
思路:
定义一个字符串数组,在for循环中获得6个0~15的随机数字,将其转化为16进制后push添加到字符串中,最后获得颜色的格式
代码如下:
随机数的函数封装:

        function getNum(min,max){
            return Math.round(Math.random()*(max-min)+min);
        }

随机颜色的函数封装::

        function getColor(){
            var arr=["#"];
            var str=[];
            for(var i=0;i<6;i++){
                arr.push(getNum(0,15).toString(16));
            }
            str=arr.join('');
            return str;
        }