阅读背景:

CSS3--5.颜色属性

来源:互联网 
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 ,不具有继承性HTML5中添加了一些新的颜色的表示方式
1.RGBA:说得简单一点就是在RGB的基础上加进了



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: