对于窗体的透明，一般来说，有三种方式：
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 }