CSS3 5 顏色屬性

2022-02-26 00:53:59 字數 1770 閱讀 8365

html5中新增了一些新的顏色的表示方式

1.rgba:說得簡單一點就是在rgb的基礎上加進了乙個通道alpha。rgba在rgb的基礎上多了控制alpha透明度的引數。以上r、g、b三個引數,正整數值的取值範圍為:0 - 255。百分數值的取值範圍為:0.0% - 100.0%。超出範圍的數值將被截至其最接近的取值極限。並非所有瀏覽器都支援使用百分數值。a引數,取值在0~1之間,不可為負值。rgba比元素設定css的透明度更好,因為單獨的顏色可以在不影響整個元素的透明度,他不會影響到元素其他的屬性,比如說邊框,字型同時也不會影響到其他元素的相關透明度

a)語法:

r:紅色值。正整數 | 百分數

g:綠色值。正整數 | 百分數

b:藍色值。正整數| 百分數

a:透明度。取值0~1之間

b)使用示例:

div2. hsla(h,s,l,a):

a)此色彩模式與hsl相同,只是在hsl模式上新增了alpha透明度

b)語法:

h:hue(色調,色相)。0(或360)表示紅色,120表示綠色,240表示藍色,也可取其他數值來指定顏色。取值為:0 – 360,過渡為:(紅橙黃綠青藍紫紅)

s:saturation(飽和度)。取值為:0.0% - 100.0%

l:lightness(亮度)。取值為:0.0% - 100.0%,50%是平衡值

a:alpha透明度。取值0~1之間。

c)示例

span

3.關於透明度的補充說明:

a)opacity只能針對整個盒子設定透明度,子盒子及內容會繼承父盒子的透明度

b)transparent 不可調節透明度,始終完全透明

c)使用rgba 來控制顏色,相對opacity ,不具有繼承性

這是內容

/*2.使用顏色拾取器*/

/*rgb(紅,綠,藍)*/

/*hsl(顏色(0~360),飽和度(0%~100%),明度(0%~100%))*/

/*明度預設是50%,一般建議保留50的值*/

/*h5中的顏色設定*/

/*rgba(紅色,綠色,藍色,透明度)

透明度:0代表完全透明 1代表完成不透明 不會影響子元素*/

background-color: rgba(255,0,255,0.2);

css顏色屬性

1.在css中如何通過color屬性來修改文字顏色 格式 color 值 取值 1.1英文單詞 一般情況下常見的顏色都有對應的英文單詞,但是英文單詞能夠表達的顏色是有限制的,也就是說不是所有的顏色都能夠通過英文單詞來表達 1.2rgb rgb其實就是三原色,其中r red 紅色 g green 綠色...

CSS顏色屬性,邊框屬性

color name 顏色英文名稱命名 hex方式 十六進製制方式 rgb方式 三原色配色方式 r red 紅色 0 255 g green 綠色 0 255 b blue 藍色 0 255 a alpha 透明度 0 1之間 語法 rgba r,g,b,a h hue 色調 0 或360 表示紅色...

CSS顏色和背景屬性

一 介紹 1 backgroundcolor屬性 backgroundcolor屬性用於設定或檢索物件的背景顏色。其對應的樣式標籤屬性為background color屬性。語法 background color color 說明 在style物件中,樣式屬性與樣式標籤屬性的語法中的引數型別基本相同...