蛋疼的CSS透明度属性

by ·13条评论

虽然我并不喜欢用这个词,但我实在找不到更贴切的词来形容这种感觉了.

先说下CSS实现半透明的方法:

1
2
3
4
5
.bantouming {
filter:alpha(opacity=50);<span style="color: #888888;"> /*IE*/</span>
-moz-opacity:0.5;<span style="color: #888888;">/*FF*/</span>
opacity: 0.5;<span style="color: #888888;">/*Chrome等*/</span>
}

用CSS来做半透明本来是非常惬意的事:不用做图片,代码也简单.但不知道这个半透明属性定义是谁做的,有个让人很无语的问题.

通常我们要的是:背景半透明,而文字不透明(文字透明了看不见).但如果对某一元素设置了半透明,那它里面的文字也都是半透明(颜色可以与背景色不一样,但透明度一样),无论如何也不能更改它里面文字的透明度…我靠

而且这个透明度貌似是”乘法继承”：将一个DIV设置透明度50%,再在里面放一个DIV设置透明度为80%——里面的DIV透明度会变得很奇怪，既不是50%也不是80%，而是50%*80%＝40%…我靠

就因为设置透明度会将文字也透明的毛病，导致CSS透明度的应用大大缩小。很多人使用时都不得不将文字与半透明的背景分别设置成一个DIV，然后通过CSS定位来进行叠加….何其麻烦

感觉所谓的W3C组织应该改进一下CSS透明度属性，要么去掉它的乘法继承，要么另设置一个只用于背景或只用于文字的透明度属性。

13 评论

发表评论

邮箱地址不会被公开。