如何设置div的透明度但是其中的文字不透明:

当前位置 : 首页 > 网页制作 > CSS > 如何设置div的透明度但是其中的文字不透明:

如何设置div的透明度但是其中的文字不透明:

来源:互联网 作者:脚本宝典 时间:2015-09-16 10:03
如何设置div的透明度但是其中的文字不透明: 建议 :尽可能的手写代码,可以有效的提高学习效率和深度。 在 CSS如何设置div背景透明度且兼容性良好 一章节介绍过如何设置一个对象的透

如何设置div的透明度但是其中的文字不透明:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
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>

上面的代码将第二个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; 
  position:absolute; 
  top:20px; 
  left:20px; 
} 
</style> 
</head> 
<body> 
  <div class="opacity"></div> 
  <span>蚂蚁部落</span>  
</body> 
</html>

以上代码实现了需要的效果。方法就是讲span元素从div取出来,使用绝对定位的方式,再将span元素定位到原来在div元素的位置。

Tag:
网友评论

<