理解CSS前景色和透明度

2021-09-29 01:43:30 字數 1046 閱讀 9475

值: | inherit

初始值: 使用者**特定的值

應用於: 所有元素

繼承性: 有

【影響邊框】

一般來說,前景是元素的文字,不過前景還包括元素周圍的邊框。有兩種方式直接影響乙個元素的前景色,可以使用color屬性,也可以使用屬性border-color設定邊框顏色

style="width: 100%; height: 400px;" src="" frameborder="0" width="320" height="240">

【繼承顏色】

color是可以繼承的,可以把文件中的所有正常文字設定為某種顏色,如通過宣告body設定為紅色。這會把所有沒有其他樣式的文字變成紅色(如錨就不包含在內,錨有其自己的顏色樣式)。但瀏覽器對表單類元素有預定義的顏色,使body顏色無法繼承到表單類元素中

style="width: 100%; height: 400px;" src="" frameborder="0" width="320" height="240">

opacity是css3中專門用來設定透明度的乙個屬性,opacity只能給整個元素設定乙個透明度,並且其透明度直接會繼承給其後代元素

值: value | inherit

value:預設值是1,可以取0-1的任意浮點數。其中,1表示完全不透明,0表示完全透明

初始值: 1

應用於: 所有元素

繼承性: 無

【相容性】

ie8-瀏覽器不支援opacity透明屬性,可以使用其專用的濾鏡來實現opacity透明屬性的透明效果

filter:alpha(opacity=透明值),該透明值是0-100之間的任意整數

opacity: 0.8;

filter:alpha(opacity=80);

style="width: 100%; height: 240px;" src="" frameborder="0" width="320" height="240">

更多專業前端知識,請上

【猿2048】www.mk2048.com

css 設定透明度

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

CSS 透明度屬性

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

CSS 定位,z index和透明度

css 定位 position 屬性允許你對元素進行定位。static 預設。位置設定為 static 的元素,它始終會處於頁面流給予的位置 static 元素會忽略任何 top bottom left 或 right 宣告 relative位置被設定為 relative 的元素,可將其移至相對於其...