CSS设置透明度与rgba颜色模式

之前我写过一篇关于CSS透明度的文章，抱怨CSS对一个元素设置透明度后，导致它里面的元素也跟着透明了。最近我发现，其实这样挺好的。

有时候我们想要一个背景半透明文字不透明的效果，比如一个“信息警告框”，但当我们给这个元素加上opacity属性后，发现背景和他里面的所有东西都半透明了，导致辨认困难。

如果你硬揪着opacity不放，你会发现用opacity来实现背景半透明文字不透明的效果很困难。于是，像我一样，觉得W3C关于透明度的设置真是蛋疼。

其实，是我们理解错了。

如果要背景半透明文字不透明这种效果，只要把background设置成rgba形式就可以了！如：

background:rgba(0,0,0,0.5);

相反，你要文字半透明而背景不管，就把color设置成rgba格式即可！

而在你需要此元素所有子元素都保持一个透明度是，才会用到opacity属性：

opacity:0.5;

我们可以这样想，如果你想要某区域里所有元素都保持一个透明度，但CSS的opacity不能继承的话，那你将会多么蛋疼！你需要设置多少个元素的opacity呢？

附一示意图：

所以，我觉得CSS现在的透明度设置挺好的我很赞成——不过，我怎么又恨起IE来了呢？妈的，IE支持rgba的颜色格式吗！

原文链接: http://www.jo2.org/archives/291.htm.

转载于:https://www.cnblogs.com/lixlib/archive/2012/02/23/css-rgba.html