这里博主介绍2种办法。
第一种用背景图的方式：
代码如下html>
半透明实例-琅枫个人博客.div1{width:300px; height:200px; background:url(http://www.phpfeng.cn/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(http://www.phpfeng.cn/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会影响到文字的透明度，所以想要背景透明而文字不透明则用第一种。
本文出自：琅枫个人博客。如需转载请注明出处！
本文出处："https://www.phpfeng.cn/learn/web/127.html"
