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