透明度的几种设置方式以及区别
- opacity : 不透明度
- 取值: 0-1.0 之间的小数
opacity : 0.5; - ie6不支持,需要通过过滤属性设置
filter:Alpha(opacity = 50); //兼容ie6
- 取值: 0-1.0 之间的小数
- rgba(red,green,blue,alpha)
- rgb取值在0-255之间
- 两者之间的区别:
- opacity 会继承父元素的opacity属性,而RGBA设置的元素的后代元素不会继承不透明属性。
说到rgba ,就想到了hsla()
- H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
- S:Saturation(饱和度)。取值为:0.0% - 100.0%
- L:Lightness(亮度)。取值为:0.0% - 100.0%
- A:Alpha透明度。取值0~1之间。
在css中表示颜色的方法有多种:
- 十六进制色 … :#RRGGBB
- RGB / RGBA … : rgb(255,0,0,.5);
- HSL / HSLA … : hsla(120,65%,75%,0.3);
- 预定义 / 跨浏览器颜色名