css透明度屬性簡介

2021-10-03 10:05:51 字數 736 閱讀 6012

opacity

用法:opaticy:0-1;

2.rgba

用法:rgba:(0-255,0-255,0-255,0-1)

透明度取值均為0-1之間。其中,0代表完全透明,1代表完全不透明。

注:若取值超出範圍(小於0或大於1),那麼會就近取合法值。如取1.2則按1顯示,取負數按0顯示。

舉例:html:

這裡是box1

這裡是box2

這裡是box3

css:

(img)

我們將上例子中的opacity改為rgba再看

```css:

.box1

.box2

.box3

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-jw0lzfqi-1583117743352)(

仔細觀察上面兩個例子,會發現opacity設定為0時其內部的文字也不顯示了,但是rgba設定為0其內部文字依然顯示。

我們給元素設定opacity時,其內部元素會和父元素有同樣的透明度,當父元素透明度為0時,其內部元素透明度均為0。

舉例:這裡是box1

這裡是box2

這裡是box3

~~ \`\`\` (img)

我們可以將opacity理解為元素變成一塊透明玻璃,其值為0時全透明不可見,幾塊顏色不同的元素疊放在一起可以改變疊加部分的顏色。

千鋒逆戰班,等你來戰。

CSS 透明度屬性

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

前端 CSS透明度屬性opacity

指定透明度的屬性是opacity,屬性值從 0.0 到 1.0。值越小,越透明。imgie9,firefox,chrome,opera 和 safari 使用屬性 opacity 來設定透明度。ie8 以及更早的版本使用濾鏡 filter alpha opacity x x 能夠取的值從 0 到 1...

css 設定透明度

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