css 設定元素背景為透明

2021-06-08 19:11:23 字數 1119 閱讀 5935

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

background-color: rgba(0, 0, 0, 0.4);
rgba 中的最後乙個引數 0.4 就是想要的透明度,範圍在0~1之間。

在 ie 中一般是這樣的:

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

filter: alpha(opacity=40);

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

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

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

下面來個示例:

html **:

aaaaa			

box

css **:

.non-transparent:hover 

.transparent

.box

顯示效果:

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

opacity: 0.4;

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

css 設定元素背景為透明

要設定某一元素的背景為透明,在 chrome firefox opera 下是這樣的 background color rgba 0,0,0,0.4 rgba 中的最後乙個引數 0.4 就是想要的透明度,範圍在0 1之間。在 ie 中一般是這樣的 background color rgb 0,0,0...

css設定元素背景

背景background 簡寫形式為 backgroud background color background position background size background repeat background origin background clip background attac...

CSS設定背景透明度

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