之前做了個半透明彈層，但設定背景半透明時，子元素包含的字型及其它元素也都變成了半透明。對opacity這個屬性認識的不透徹，在這裡做一些總結，方便以後使用。
背景透明，文字不透明的解決方法：
為元素新增乙個絕對定位的子元素，設定大小和該元素一樣，把半透明加在絕對定位元素上作為遮罩，z-index設定到最底部，達到背景半透明效果。
使用css3新屬性rgba。
實現透明的方法：
谷歌瀏覽器下測試各種屬性，如下圖。
沒有設定透明度div>div>
用opacity設定透明度div>div>
用rgba設定透明度div>div>
ie專屬filter設定透明度div>div>
圖1
css3的opacity：
由圖1可以看出，使用opacity屬性的第二個方塊其子元素包含的文字也變成了半透明。
注釋：設定opacity元素的所有後代元素會隨著一起具有透明性，一般用於調整或者模組的整體不透明度，相容ie9及以上版本和標準瀏覽器。
css3的rgba：
由圖1可看出，設定rgba的方塊可實現背景色透明，並且子元素包含的文字不透明。
注釋：ie9+、firefox 3+、chrome、safari 以及 opera 10+都支援。
ie的filter : alpha(opacity=x)：
全相容：
只支援ie6、7、8瀏覽器的css hack：
/* 只支援ie6、7、8 */
@media \0screen\,screen\9
charset="utf-8">
背景透明，文字不透明title>
*body
.test-opacity
/* 只支援ie6、7、8 */
@media \0screen\,screen\9
.test-opacityp}
style>
class="test-opacity">
背景透明，文字不透明p>
div>
body>
html>
css如何實現背景透明，文字不透明
之前做了個半透明彈層，但設定背景半透明時，子元素包含的字型及其它元素也都變成了半透明。對opacity這個屬性認識的不透徹，在這裡做一些總結，方便以後使用。背景透明，文字不透明的解決方法 為元素新增乙個絕對定位的子元素，設定大小和該元素一樣，把半透明加在絕對定位元素上作為遮罩，z index設定到最...
css實現背景透明文字不透明
設定元素的透明度 moz opacity 0.8 在firefox中設定元素透明度 filter alpha opacity 80 ie使用濾鏡設定透明但是當我們對乙個標籤設定背景的透明度時，往往我們並不希望該標籤上的文字也變成半透明了。例如 不透明p div div 可以很明顯的看出文字也被半透明...
css實現背景透明文字不透明
moz opacity 0.8 在firefox中設定元素透明度 filter alpha opacity 80 ie使用濾鏡設定透明 但是當我們對乙個標籤設定背景的透明度時，往往我們並不希望該標籤上的文字也變成半透明了。例如 不透明 div可以很明顯的看出文字也被半透明的，這是我們不想看到的效果。...