如何設定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

如何設定div的透明度但是其中的文字不透明