CSS如何设置div背景透明度且兼容性良好:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
设置对象的透明度在很多网页特效中都有实用，设置对象的透明度并不难，唯一的难点可能就是如何兼容各大主流浏览器，下面就简单介绍一下如何实现此效果。代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.opacity{
width:150px;
height:150px;
background-color:green;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
margin-left:20px;
margin-top:20px;
}
span{
display:block;
width:80px;
height:80px;
}
</style>
</head>
<body>
<div class="opacity">
<span>蚂蚁部落</span>
</div>
</body>
</html>
上面的代码实现了各个浏览器的兼容。起透明效果的代码如下:
filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;
第一行代码仅能在IE浏览器中有效。
第二行代码支持老版本的FF浏览器，其实去掉也可以，因为老版本的浏览器使用率很少了。
第三行能够支持各大浏览器，但是IE6-IE8浏览器不支持。
特别说明:
虽然实现了背景透明，但div中的文字也呈现为透明状态，这往往不是想要的，可以参阅如何设置div的透明度但是其中的文字不透明一章节解决此问题。
原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=4680
时间： 2024-08-03 19:18:41