css3 -- 颜色与不透明度

Posted 2020-07-15 zhanghuiyun

1、opacity：

opacity的值会被它的所有子元素继承，也就是说不可能让一个元素比他的父元素更加不透明，但你可以让他变得更透明点

Firefox  Webkit  Opera支持，注意IE

 

2、使用Alpha通道可以像其他任何颜色值一样被子元素继承，但元素的整体不透明度并不受影响，rgba值只能应用到它的指定元素上，所以子元素可以否决所有的继承

Firefox  Webkit  Opera支持，注意IE

 

3、颜色变量

1 p {color:black;}
2 p:last-child{
3    backgorund-color:black;
4    color:white;
5 }
6 p abbr {border-bottom : 6px double currentColor;}

更新父元素颜色而不需要担心如何把该颜色也设置到相关的子元素上

Firefox  Webkit  Opera支持，注意IE