我們在做pc端專案的時候，常常會碰到透明背景和透明的的需求，但是透明度常常有會發生很多問題，特別是背景透明內容不透明，想要相容所有瀏覽器實現起來就比較麻煩。
如何實現背景透明，文字不透明，相容所有瀏覽器？
其實平時說的調整透明度，其實是在樣式中調整不透明度，如下圖：
實現透明的css樣式通常有以下3種方式，以下是不透明度都為50%的寫法:
下面我們來乙個乙個的解釋：
1、css3的opacity
相容：css3的opacity不相容ie低版本，ie6/7/8不支援，ie9以上都支援
opacity適用情況：設定opacity的元素，不光設定的元素透明，後代元素也會繼承opacity，一起也有透明效果，所以opacity一般用於調整個別，或者部分模組的的透明度
背景透明,內容也透明
因此，使用opacity實現（背景透明，文字不透明）是無法實現的。
2、css3的rgba
相容性：ie6、7、8不支援，ie9及以上版本和標準瀏覽器都支援
使用說明：設定顏色的透明度，只要用到設定顏色都適用。
背景透明,內容也透明
ie6、7、8rgba的錯誤顯示，所以rgba可以設定我們想要的效果，但是有相容性，ie6、7、8設定rgba會錯誤顯示，識別不了,但是有ie專屬濾鏡 filter:alpha(opacity=x)，我們可以一起看看。
背景透明,內容也透明
ie6、7、8的可以識別濾鏡 filter，在ie10版本被廢除，ie10和10以上不識別
4、透明度全相容的方案
以上分析我們知道，設定透明背景內容不透明，可使用的屬性有rgba和ie的專屬濾鏡filter:alpha
針對ie6、7、8瀏覽器，我們可以使用fiter濾鏡，針對標準瀏覽器我們使用rgba，那麼問題來了，ie9瀏覽器2個屬性都支援，一起使用會重複降低不透明度，那麼，如何只對ie6、7、8使用fiter:alpha如何實現呢？我們可以通過csshack，設定有ie的相關hack，找到只支援ie 6、7、8的方案的方法
/* 只支援ie6、7、8 */
@media \0screen\,screen\9
透明度所有問題都解決了，全部**如下：
背景透明,內容也透明
css實現背景透明文字不透明
設定元素的透明度 moz opacity 0.8 在firefox中設定元素透明度 filter alpha opacity 80 ie使用濾鏡設定透明但是當我們對乙個標籤設定背景的透明度時，往往我們並不希望該標籤上的文字也變成半透明了。例如 不透明p div div 可以很明顯的看出文字也被半透明...
背景色透明，文字不透明
背景色透明，文字不透明 在工作中遇到這麼乙個問題 1 背景色透明 2 在透明背景中文字是不透明的 3 文字要水平居中 為此，我給出了兩種解決辦法 1 使用html5的 rgba 屬性配置 背景透明，文字也透明 原理說明 1 div.demo背景色是黑色透明的 2 p標籤的內容是水平居中，並且沒有設定...
css實現背景透明文字不透明
moz opacity 0.8 在firefox中設定元素透明度 filter alpha opacity 80 ie使用濾鏡設定透明 但是當我們對乙個標籤設定背景的透明度時，往往我們並不希望該標籤上的文字也變成半透明了。例如 不透明 div可以很明顯的看出文字也被半透明的，這是我們不想看到的效果。...