html div背景半透,css半透明背景实现方法

这里博主介绍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;}

效果图如下

第二种用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;}

效果图如下：

注：filter:alpha(Opacity=60);是为了兼容IE，-moz-opacity是为了火狐浏览器实现半透明，opacity则是谷歌了。

还有一点是opacity会影响到文字的透明度，所以想要背景透明而文字不透明则用第一种。

本文出自：琅枫个人博客。如需转载请注明出处！

本文出处："https://www.phpfeng.cn/learn/web/127.html"