css如何實現背景透明，文字不透明

之前做了個半透明彈層，但設定背景半透明時，子元素包含的字型及其它元素也都變成了半透明。對opacity這個屬性認識的不透徹，在這裡做一些總結，方便以後使用。

背景透明，文字不透明的解決方法：

為元素新增乙個絕對定位的子元素，設定大小和該元素一樣，把半透明加在絕對定位元素上作為遮罩，z-index設定到最底部，達到背景半透明效果。

使用css3新屬性rgba。

實現透明的方法：

谷歌瀏覽器下測試各種屬性，如下圖。

<

div 
style
="width:150px;height:100px;float:left;background-color:#ff0000;"
><
div>沒有設定透明度
div>
div>
<
div 
style
="width:150px;height:100px;float:left;margin-left:10px;background-color:#ff0000;opacity:0.5;"
><
div>用opacity設定透明度
div>
div>
<
div 
style
="width:150px;height:100px;float:left;margin-left:10px;background-color:rgba(255,0,0,0.5);"
><
div>用rgba設定透明度
div>
div>
<
div 
style
="width:150px;height:100px;float:left;margin-left:10px;background-color:#ff0000;filter:alpha(opacity=50);"
><
div>ie專屬filter設定透明度
圖1 
css3的opacity：
由圖1可以看出，使用opacity屬性的第二個方塊其子元素包含的文字也變成了半透明。
注釋：設定opacity元素的
所有後代元素會隨著一起具有透明性
，一般用於調整或者模組的整體不透明度，相容ie9及以上版本和標準瀏覽器。
css3的rgba：
由圖1可看出，設定rgba的方塊可實現背景色透明，並且子元素包含的文字不透明。
注釋：ie9+、firefox 3+、chrome、safari 以及 opera 10+都支援。
ie的filter : alpha(opacity=x)：
全相容：
ie6ie7
ie8ie9
標準瀏覽器
rgba✘✘
✘✔✔filter : alpha✔✔
✔✔✘ 
只支援ie6、7、8瀏覽器的css hack：
/* 只支援ie6、7、8 */
@media \0screen\,screen\9 
demo：
doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>背景透明，文字不透明
title
>
<
style
>
*body
.test-opacity
/*只支援ie6、7、8 
*/@media \0screen\,screen\9 
.test-opacity p
}style
>
<
body
>
<
div 
class
="test-opacity"
>
<
p>背景透明，文字不透明
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可以很明顯的看出文字也被半透明的，這是我們不想看到的效果。...