css 設定透明度

2022-03-05 01:30:46 字數 1048 閱讀 4469

要設定某一元素的背景為透明,在 chrome 、firefox、opera 下是這樣的:

[css]

background-color:rgba(0, 0, 0,0.4);

rgba 中的最後乙個引數 0.4 就是想要的透明度,範圍在0~1之間。

在 ie 中一般是這樣的:

[css]

background-color: rgb(0, 0, 0);

filter: alpha(opacity=40);

opacity 表示透明度,它的值範圍在 0~100 之間

要相相容可以實現以下**:

那麼如何相容各瀏覽器呢?只要把它們寫在一起就行了。

由於 ie 不支援 rgba,所以會忽略之。其他瀏覽器對於自己不支援的,一般也會忽略。

下面來個示例:

html **:

[html]

aaaaa  

div>  

body>  

box  

div>  

div>  

css **:

[css]

.non-transparent:hover   

.transparent   

.box   

顯示效果:

chrome:

firefox:

opera:

ie8:

另外,在 chrome、firefox、opera 中也可以這樣:

opacity: 0.4;

但是這樣的話,會把所有子元素的透明度也設定為同樣的值,效果如下圖:

CSS設定背景透明度

控制 如下 各引數含義如下 enabledenabled設定或檢索濾鏡是否啟用。stylestyle設定或檢索div背景透明漸變的樣式。opacityopacity設定或檢索透明漸變的開始透明度。finishopacityfinishopacity設定或檢索div背景透明漸變的結束透明度。start...

CSS 透明度屬性

firefox3.5已不支援私有屬性 moz opacity了,在mozilla 1.7 firefox 0.9 之前ff都是使用這個私有屬性的,firefox 0.9 firefox3同時支援 moz opacity和opacity這兩個屬性,firefox公升級到3.5之後,一些 原來有的透明沒...

CSS設定div元素的透明度

在ie中需要通過 filter 來定義透明度 opacity 而在mozilla中是可以直接解析 opacity 所以如果要使得這個效果在兩種瀏覽器中都得到支援,需要把兩種設定都加進去。div 用下面的樣式表定義你的div可以有各種過度效果。alpha是div的class.精心開發5年的ui前端框架...