CSS透明属性详解
.transparent_class
{
filter:alpha(opacity=50);
opacity: 0.5;
}
cssclass属性opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性⽀持, Safari和 Opera.
filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.
CSS透明度继承问题
但CSS的透明属性涉及到⼀个继承问题,当为⽗级元素设置透明度后,⼦元素将⾃动继承其透明度,⽐如本站的⼀个效果:
css transparent inheirt CSS透明属性详解
即使你⼜为⼦元素指定透明度为1也是⽆效的。
对于⼦元素是⽂字的情况,我的解决⽅法⼀般是如果多少还能够看清,就不管。另⼀个折衷的⽅法是,为⽂本⼦元素指定⼀个相对更深的颜⾊。也就是说,当⼦元素继承透明度后,所得到的⽂本颜⾊正好就是你想要的。前提是,这个颜⾊还有加深的可能,和需要详细的计算颜⾊和透明度的值。
还有“取消透明度继承”的说法,这个说法是不太准确的,据我个⼈所知,没有任何取消透明度继承的⽅法。只能说,当想要实现“多个元素覆盖,只让指定的元素透明”时,可以使⽤的⼀些Hack。
搜了⼀下,到⼀个不错的实现这种效果的⽅法 – ,有兴趣的朋友可以看看。原理很简单,添加⼀个空元素作为透明层,和不想透明但是要实现覆盖效果的元素为同级元素。⽗级元素使⽤position:relative定位; 两个⼦元素使⽤position:absolute定位,实现覆盖。