对CSS设置透明度的抱怨

之前我写过一篇关于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的颜色格式吗!

 

4 评论

发表评论

电子邮件地址不会被公开。