css半透明背景实现方法
这里博主介绍2种办法。
第一种用背景图的方式：
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>半透明实例-琅枫个人博客</title>
<style>
.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;}
</style>
</head>
<body>
<div class="div1">
<div class="div2">DIV半透明实例演示</div>
</div>
</body>
</html>效果图如下
第二种用opacity了；
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>半透明实例-琅枫个人博客</title>
<style>
.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;}
</style>
</head>
<body>
<div class="div1">
<div class="div2">DIV半透明实例演示</div>
</div>
</body>
</html>效果图如下：
注：filter:alpha(Opacity=60);是为了兼容IE，-moz-opacity是为了火狐浏览器实现半透明，opacity则是谷歌了。
还有一点是opacity会影响到文字的透明度，所以想要背景透明而文字不透明则用第一种。
本文出自：琅枫个人博客。如需转载请注明出处！
本文出处："https://www.langfujun.top/learn/web/127.html"
如果您觉得文章对你有帮助，可以进行打赏。
打赏多少，您高兴就行，谢谢您对琅枫博客的支持！ ~(@^_^@)~
微信打赏
支付宝打赏
