个人博客 > 学无止境 > WEB前端 > css半透明背景实现方法

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>

效果图如下

css半透明背景实现方法

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

效果图如下:

css半透明背景实现方法

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

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

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

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

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对琅枫博客的支持! ~(@^_^@)~

微信打赏

琅枫博客微信号

支付宝打赏

琅枫博客个人支付宝
本文关键词: 背景 方法



你想在庞大的互联网上留下一丝足迹?

我不想成为一个庸俗的人。十年百年后,当我们死去,质疑我们的人同样死去,后人看到的是裹足不前、原地打转的你,还是一直奔跑、走到远方的我?

点我了解如何搭建个人博客?