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

王朝学院·作者佚名  2016-05-23
窄屏简体版  字體: |||超大  

如何设置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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航