Wed安全色
不同的平臺(Mac、PC等)有不同的調(diào)色板,不同的瀏覽器也有自己的調(diào)色板。這就意味著對于一幅圖,顯示在Mac上的Web瀏覽器中的圖像,與它在PC上相同瀏覽器中顯示的效果可能差別很大。
Web 安全色可以使得我們不需要擔心顏色在不同硬件環(huán)境、操作系統(tǒng)和瀏覽器之間的差異。
Web安全色參考
前景色與背景色
CSS 中的前景色和背景色就是 color 和 backgorund-color 兩個屬性
color 屬性表示前景色,更多地是用來表示 HTML 元素的文本內(nèi)容顏色
background-color 屬性表示背景色,該屬性的默認值是 transparent(透明)。
色彩關(guān)鍵字、
色彩關(guān)鍵字是一個不區(qū)分大小寫的標識符,其表示一個具體的顏色
transparent 關(guān)鍵字表示一個完全透明的顏色,并且 transparent是 background-color 屬性的默認值。
顏色關(guān)鍵字查詢
透明度
在 CSS3 版本中新增了 opacity 屬性用來設(shè)置 HTML 元素的透明度,該屬性的值范圍介于 0.0 ~ 1.0(不透明) 之間。
- 例 將修改文本顏色的透明度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>練習</title>
<style>
.red {
color: red;
opacity: 0.2;
}
.green {
color: green;
opacity: 0.5;
}
.blue {
color: blue;
opacity: 0.8;
}
</style>
</head>
<body>
<p class="red">時間讓人成長,歲月使人成熟,奮斗激勵成功。 </p>
<p class="green">經(jīng)歷充實人生,挫折磨練人的意志,困難挑戰(zhàn)人的極限。</p>
<p class="blue">奇跡考驗人的毅力,災(zāi)禍塑造人的堅強,人生就是不停地跌倒,不停的強大,堅信自己,突破自我。</p>
</body>
</html>
-
代碼效果
image.png
顏色模式
一共有4中顏色模式,其中只有rgb屬于CSS2,剩下的都是CSS3中新加的
- rgb()
RGB是一個簡稱,全稱為 Red-Green-Blue,即紅-綠-藍。RGB 色彩模式是工業(yè)界的一種顏色標準,是通過對紅、綠、藍三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的。
CSS中有兩種使用rgb的方式:十六進制符號
#RRGGBB和#RGB和函數(shù)符rgb(R, G, B)其參數(shù)可以為0到255可以為0%到%255
- hsl()
HSL是一個簡稱,全稱為 Hue-Saturation-Lightness,即 色調(diào)-飽和度-亮度。HSL 色彩模式是一種將 RGB 色彩模型中的點在圓柱坐標系中的表示法。
在 CSS 中使用 HSL 色彩模式是通過 hsl(H, S, L) 函數(shù)實現(xiàn)的H 表示色調(diào)(是色彩的基本屬性,就是平常所說的顏色名稱),其值范圍為 0 ~ 360 之間的一個角度。
S 表示飽和度(飽和度是指顏色中灰色的含量),其值范圍為 0% ~ 100% 之間的百分值。
L 表示亮度(亮度 是指顏色中黑色的含量),其值使用百分值表示。0%表示黑色,50%表示標準色,100%表示白色。
- rgba()
在原基礎(chǔ)上增加a,其中 A 為 alpha 表示透明度。
- hsla()
在原基礎(chǔ)上增加a,其中 A 為 alpha 表示透明度。
