你的位置:首页 > 网页设计

[网页设计]如何设置div的透明度但是其中的文字不透明

如何设置div的透明度但是其中的文字不透明:
设置div透明度的时候可能很多朋友会遇到这样一个问题,那就是对象中的文字也被产生了透明现象,也不能说事缺陷,也可能有时候需要这样的效果。这里就介绍一下如何将对象设置为透明效果,但是文字不透。代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><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.51texiao.cn/" /><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元素的位置。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/514.html