码迷,mamicode.com
首页 > Web开发 > 详细

CSS如何设置div背景透明度且兼容性良好

时间:2015-09-16 06:18:33      阅读:296      评论:0      收藏:0      [点我收藏+]

标签:

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

CSS如何设置div背景透明度且兼容性良好

标签:

原文地址:http://www.cnblogs.com/nulifendou/p/4811987.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!