首頁 >web前端 >css教學 >css設定背景層透明的方法

css設定背景層透明的方法

小云云
小云云原創
2017-11-27 09:47:532728瀏覽

css能夠對網頁中元素位置的排版進行像素級精確控制,支援幾乎所有的字體字號樣式,擁有對網頁物件和模型樣式編輯的能力。 html中如果需要設定某一層的背景為透明該如何去設定呢?以下分享如何使用css設定透明層效果,這種方法並且是對所有瀏覽器都相容的。

下面是具體的程式碼(以上效果設定的是0.8):

 .transparent{    
filter:alpha(opacity=50);    
-moz-opacity:0.5;    
-khtml-opacity: 0.5;    
 opacity: 0.5;    
 }

我們來看看效果:

css設定背景層透明的方法

下面是對以上CSS程式碼的一些補充說明:

opacity:0.5;這個屬性是目前在CSS裡面設定透明度的標準屬性。適用於大多數版本的Firefox,Safari和Opera等瀏覽器。

filter:alpha(opacity=50);這個屬性只是支援IE瀏覽器。

-moz-opacity:0.5;這個屬性是為了向前相容以前的一些舊的Mozilla瀏覽器,例如:Netscape Navigator。

-khtml-opacity: 0.5;這個屬性是為了相容於舊版的Safari瀏覽器(1.x的),它使用的渲染引擎仍然稱為為KTHML,相對於目前的WebKit。

以上內容就是css設定透明層效果的方法,希望對大家有幫助。

相關推薦:

css怎麼設定透明度

#利用CSS3新增內容實作製作透明三角形的方法實例展示

ccs透明屬性與背景透明繼承方法實例詳解

CSS如何設定div背景透明樣式的實例分析

背景顏色設定成透明實例教學

#

以上是css設定背景層透明的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn