解決css設置背景透明,文字不透明


設置元素的透明度:
 -moz-opacity:0.8; /*在Firefox中設置元素透明度
 filter: alpha(opacity=80); /*ie使用濾鏡設置透明
 
但是當我們對一個標簽設置背景的透明度時,往往我們並不希望該標簽上的文字圖片也變成半透明了。
 
例如:
 <div><p>不透明</p></div>
 
div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500px;
 height:500px;color:#F30; font-size:32px; font-weight:bold; }
 
可以很明顯的看出文字也被半透明的,這是我們不想看到的效果。
 以前我曾經是絕對定位的方法解決這個問題,也就是現在的p並不是div的子元素。
 
<div></div>
 <p>不透明</p>
 
這樣div的半透明效果也就不會影響到元素p了。最后在將p定位到需要的位置。
 但是很多時候這樣的標簽並不是很合理,有可能還會多浪費幾個標簽。
 
下面的這種方法就可以解決上面的問題了:
 div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*實現FF背景透明,文字不透明*/
background:#000; filter:Alpha(opacity=20);/*實現IE背景透明*/ 
 width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}
 div p{ position:relative;}/*實現IE文字不透明*/
 
火狐我們直接用rgba顏色就可以解決子標簽跟着半透明的問題了,但是ie還不是能很好的支持。
 所以我們給不想被透明的標簽設置一個定位屬性,問題接能解決了。
 
文字來自:http://blog.163.com/l_lihanyu/blog/static/12003272320123185372127/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM