实现窗体背景透明

对于窗体的透明，一般来说，有三种方式：

1.通过Ps等工具制作一定透明度的图片，放在div或其他想要放置的trigger里面。以此实现透明的效果。

1 <html>
2 　　<body>
3 　　　　<div id="content">　　
4 　　　　　　<label>背景透明</label>
5 　　　　</div>
6 　　</body>
7 </html>

1 #content
2 {
3 　　background:url(../../bg.png);
4 }

2.通过对窗体添加滤镜，用CSS的方式实现透明，代码如下：

1 <html>
2 　　<body>
3 　　　　<div id="content">
4 　　　　　　<label>背景透明</label>
5 　　　　</div>
6 　　</body>
7 </html>

1 #content2 {
3     filter:alpha(opacity=50);     //这里的50指透明度
4    -moz-opacity:0.5;              //这里的0.5指透明度（下同）
5     -khtml-opacity: 0.5;  
6     opacity: 0.5;  
7 }

但是，这种透明的效果会使得该div的透明度被子元素所继承，即label也会变成半透明。这在一些情况下，就不是我们想要的。对于这种情况，我们通常的解决方法就是将父元素和子元素分离，让div不再是label的父元素，而是一个半透明的遮罩层，在通过z-index通知label在div之上显示，代码修改如下：

1 <html>
2 　　<body>
3 　　　　<div id="content"></div>
4 　　　　<label>文字不透明</label>
5 　　</body>
6 </html>

 1 #content
 2 {
 3     filter:alpha(opacity=50);     
 4     -moz-opacity:0.5;              
 5     -khtml-opacity: 0.5;  
 6     opacity: 0.5;  
 7     z-index:100;
 8 }
 9 label
10 {
11 　　position:absolute;
12 　　z-index:101;
13 }

通过position和z-index控制label显示在div上面，以此达到窗体背景透明而内容不透明的效果，虽然这样可以解决问题，但是在布局上难免有些僵硬，所以对于这样的问题，还有第三种处理方式。

3.同样是div背景透明，子元素不改变，在这个基础上设置背景透明，代码如下：

1 <html>
2 　　<body>
3 　　　　<div id="content">
4 　　　　　　<label>背景透明,文字不透明</label>
5 　　　　</div>
6 　　</body>
7 </html>

 1 #content
 2 {
 3 　　background:rgba(255, 255, 255, 0.5) none repeat scroll 0 0 !important;
 4 　　background:#fff;
 5 　　filter: alpha(Opacity=50);  
 6 }
 7 #content label
 8 {
 9 　　position:relative;  
10 }