这里博主介绍2种办法。
第一种用背景图的方式：
代码如下html>
半透明实例-琅枫个人博客
.div1{width:300px;height:200px;background:url(/statics/assets/i/b1.jpg);}
.div2{width:300px;height:50px;background:rgba(0,0,0,0.5);color:#fff;}
DIV半透明实例演示
效果图如下
第二种用opacity了；
代码如下：html>
半透明实例-琅枫个人博客
.div1{width:300px;height:200px;background:url(/statics/assets/i/b1.jpg);}
.div2{width:300px;height:50px;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity:0.6;color:#fff;background:#000;}
DIV半透明实例演示
效果图如下：
注：filter:alpha(Opacity=60);是为了兼容IE，-moz-opacity是为了火狐浏览器实现半透明，opacity则是谷歌了。
还有一点是opacity会影响到文字的透明度，所以想要背景透明而文字不透明则用第一种。
本文出自：琅枫个人博客。如需转载请注明出处！
本文出处："/learn/web/127.html"
