利用css實現背景透明和文字不透明效果匯總

在專案開發過程中，透明和不透明樣式的使用很早就開始流行了。到現在已經是大家非常熟悉的效果了，透明效果不只是對圖片，還有各種地方都有使用到，用CSS也可以非常簡單的實現各種瀏覽器的兼容設置。有時候常常會用在背景圖上放一些文字介紹，需要有背景圖片透明而文字不透明的效果。下面章節的內容我們就來說一說利用css來實現背景圖片透明而文字不透明效果。

背景透明與文字不透明效果

1. 用CSS實作背景圖片透明而文字不透明的兩種方法

方法一(毛玻璃效果)：背景圖+ 偽類別+ flite:blur(3px)

方法二(半透明效果)：背景圖+ 定位+ background:rgba(255,255,255,0.3)

CSS實現背景圖片透明，文字不透明效果的兩種方法

2. CSS實現背景透明，文字不透明（相容各瀏覽器）

在FF/Chrome 等較新的瀏覽器中可以使用css屬性background-color的rgba輕鬆實現背景透明，而文字保持不透明。而IE6/7/8瀏覽器不支援rgba，只有使用IE的專屬濾鏡filter:Alpha來實現，但是這樣寫法會把文字也變成透明，因此只有在透明容器的子節點（文字節點除外）內設定position:relative才能不繼承其父元素的透明濾鏡。

3. css實作背景透明和文字不透明方法

實作透明的css方法通常有以下3種方式，以下是不透明度都為80%的寫法

css3的opacity:x，x 的取值從0 到1，如opacity: 0.8

css3的rgba(red, green, blue, alpha)，alpha的取值從0到1，如rgba(255,255,255,0.8)

IE專屬濾鏡filter:Alpha(opacity=x)，x 的取值從0 到100，如filter:Alpha(opacity=80)

4. 解決css設定背景透明，文字不透明

設定元素的透明度：

-moz-opacity:0.8; /*在Firefox中設定元素透明度

filter: alpha(opacity=80); /*ie使用濾鏡設定透明

但是當我們對一個標籤設定背景的透明度時，往往我們並不希望該標籤上的文字圖片也變成半透明了。

5. 實作CSS3不透明度完整程式碼

取值說明：

#1、|是由浮點數和單位標識符組成的長度值。不可為負值，預設值為1.opacity取值為1時，則元素為完全不透明的；反之，取值為0時，元素是完全透明的，不可見。

2、inherit表示繼承，即繼承父元素的不透明性。

3、針對IE瀏覽器，可以使用它的私有屬性filter來相容：filter：alpha（alpha=value）；。

相關問答

1. css實作背景透明內容不透明

2. canvas背景不透明,但內部某元素透明(類似鏤空效果)

3. 求css背景透明與文字不透明的方法

【相關推薦】

1. php中文網免費影片教學：《php.cn獨孤九賤（2）－css影片教學》

2. php中文網相關文章：CSS中關於半透明設定的總結

以上是利用css實現背景透明和文字不透明效果匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章！