今天在開發乙個漂浮在背景圖上方的模態動畫，之前只記得opacity和rgba可以實現透明度設定，但是在實現「背景透明，文字不透明」的效果中卻不是都可行的，下面我們就來實際測試一下。
css實現透明效果的方法一般有以下3種方式，以下是不透明度都為50%的寫法
本文討論上面兩種方法，ie下的情況也可使用但不做講解。
（1）opacity《無法實現背景透明，文字不透明效果》
設定opacity元素的所有後代都會一起具有透明性
"trans">
測試文字
複製**
（2）rgbargba(0,0,0,0.2) 顏色的rgb三色值，和透明度
"trans">
測試文字
複製**
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可以很明顯的看出文字也被半透明的，這是我們不想看到的效果。...
css實現背景透明，文字不透明
實現透明的css方法通常有以下3種方式，以下是不透明度都為80 的寫法 相容性 ie6 7 8不支援，ie9及以上版本和標準瀏覽器都支援 背景透明，文字也透明 使用opacity後整個模組都透明了，展現如下 那麼使用opacity實現 背景透明，文字不透明 是不可取的。相容性 ie6 7 8不支援，...