透明层实现

这里的透明想必大家都经常看到吧？今天用firbug好奇的查看了一下，竟然是用CSS3的属性opacity做的，我的第一反映便是这兼容IE6嘛，打开IE6做测试，竟然是兼容的。这么实用的属性怎么之前一直都没发现呢？？

百度了一下opacity，上面是说不兼容的啊，呃...

再次回到网站上用firbug查看，终于被我看出了端倪。

这里的第一句貌似是用来兼容IE的吧？？好像IE是有内置的滤镜和透明通道。为了巩固知识，于是我便做了个demo。我写了这样一个基础的html样式。
HTML:

<div class="bg">
    <p>这里的背景要透明</p>
</div>

CSS:

*{
    margin:0;
    padding:0;
    font-size:12px;
}
body{
    text-align:center; 
    background-color:#e3e3e3;
}
.bg{
    margin:0 auto;
    width:200px;
    height:200px;
    background-color:#ccc;
    position:relative;
}
.bg p{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:20px;
    line-height:20px;
    z-index:20px; 
    background-color:#fff; 
    color:#000; 
}

很简单的一个小样式。

好，接下来我给.bg p样式写上透明属性opacity看下是什么效果的。
CSS:

.bg p{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:20px;
    line-height:20px;
    z-index:20px; 
    background-color:#fff; 
    color:#000;
    opacity:0.3;
}

竟然整个P标签都透明了，包括里面的文字。呃，那怎么办。我试图用一个透明的div套着P，给P重新定义成不透明，效果还是一样。

CSS：

.bg .bg_p{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:20px;
    line-height:20px;
    z-index:20px; 
    background-color:#fff; 
    opacity:0.6; 
    color:#000;
}
.bg .bg_p p{
    opacity:1;
}

HTML：

<div class="bg">
    <div class="bg_p"><p>这里的背景要透明</p></div>
</div>

好吧，得出一个结论，opacity属性可以使自身包括子孙标签都透明，且子孙标签无法通过重新定义脱离这个透明。
再次研究那个网站的实现方法，发现原来里面的文字是和背景div分离开来的。嗯，那我也分离开来做。
CSS:

*{
    margin:0;
    padding:0;
    font-size:12px;
}
body{
    text-align:center;
    background-color:#e3e3e3;
}
.bg{
    margin:0 auto;
    width:200px;
    height:200px;
    background-color:#ccc;
    position:relative;
    text-align:center
}
.bg .bg_p{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:20px;
    z-index:20px;
    background-color:#fff;
    opacity:0.3;
}
.bg p{
    position:absolute;
    bottom:2px;
    left:0;
    width:100%;
    color:#000;
}

HTML:

<div class="bg">
    <div class="bg_p"></div>
    <p>这里的背景要透明</p>
</div>

OK，在非IE浏览器上都实现了。

IE678上还是这样，

好的，接下来把IE的滤镜加上看看。
再把filter写上。
CSS:

.bg .bg_p{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:20px;
    z-index:20px;
    background-color:#fff;
    filter:alpha(opacity=30);
    opacity:0.3;
}

好了，IE678也完美透明了。

知识梳理：

1. Opacity的使用：http://www.qianduan.net/css3-series-tutorial-transparency.html

2. Filter的使用：http://angeldhp.iteye.com/blog/146616

3. opacity属性可以使自身包括子孙标签都透明，且子孙标签无法通过重新定义脱离这个透明。

4. Opacity:1==filter:alpha(opacity=100)==不透明。

5. demo地址：http://pan.baidu.com/share/link?shareid=182375&uk=3221702211