在項目開發過程中,透明和不透明樣式的使用很早就開始流行了。到現在已經是大家非常熟悉的效果了,透明效果不僅僅是對圖片,還有各種地方都有使用到,用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、<alphavalue>|是由浮點數和單位標識符組成的長度值。不可為負值,預設值為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中關於半透明設定的總結