CSS3--5.颜色属性

最新推荐文章于 2022-02-26 21:09:59 发布

weixin_30485291

最新推荐文章于 2022-02-26 21:09:59 发布

阅读量80

点赞数

原文链接：http://www.cnblogs.com/Tobenew/p/10525092.html

版权

HTML5中添加了一些新的颜色的表示方式
1.RGBA：说得简单一点就是在RGB的基础上加进了一个通道Alpha。RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。RGBA比元素设置CSS的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度
a)语法:
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
b)使用示例：
div{
    width: 200px;
    height: 200px;
    background-color: rgba(10,20,245,0.5);
    color: white;
}
2. HSLA(H,S,L,A)：
a)此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度
b)语法：
H：Hue(色调,色相)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 – 360,过渡为：(红橙黄绿青蓝紫红)
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%，50%是平衡值
A：Alpha透明度。取值0~1之间。
c)示例
span{
    width: 200px;
    height: 200px;
    display: block;
    background-color: hsla(360,100%,50%,0.6);
    color: white;
}
3.关于透明度的补充说明：
a)opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度
b)transparent 不可调节透明度，始终完全透明
c)使用rgba 来控制颜色，相对opacity ，不具有继承性

<style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            /*1.使用预设了值*/
            background-color: red;
        }
    </style>
</head>
<body>
    <div>这是内容</div>
</body>

/*2.使用颜色拾取器*/
background-color: #c9ffa6;

/*rgb(红，绿，蓝)*/
background-color: rgb(255,150,0);

/*hsl(颜色(0~360)，饱和度(0%~100%)，明度(0%~100%))*/
/*明度默认是50%,一般建议保留50的值*/
background-color: hsl(300,100%,50%);

 /*h5中的颜色设置*/
/*rgba(红色，绿色，蓝色，透明度)
 透明度：0代表完全透明  1代表完成不透明  不会影响子元素*/
background-color: rgba(255,0,255,0.2);

转载于:https://www.cnblogs.com/Tobenew/p/10525092.html

weixin_30485291

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3--5.颜色属性

HTML5中添加了一些新的颜色的表示方式1.RGBA：说得简单一点就是在RGB的基础上加进了一个通道Alpha。RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。RG...
复制链接

扫一扫