CSS 中的顏色、背景和剪下
CSS 中可以改變文字的顏色還有元素的背景顏色。可以用顏色關鍵字來定義顏色,如 red
,但是這些顏色關鍵字並不常用。
transparent
transparent
可以讓文字或背景變的完全透明的顏色,它就像 rgba(0,0,0,0)
的縮寫。
currentColor
currentColor
代表原始的 color
屬性的計算值。比如當前元素 color
為紅色,背景色設定為 currentColor
,那麼現在背景色也為紅色。
rgb、rgba
顏色還可以用 rgb
函式表示,如 rgb(255, 255, 255)
代表白色,它每個引數的取值範圍是 0
到 255
,它是用不同比例的紅、綠、藍來組成期望顏色。
rgba
函式代表紅-綠-藍-阿爾法,其中的 a
是透明度,取值範圍是 0
到 1
。
除了使用 rgb
函式,還可以使用 16 進位制來表示,它的語法是 #RRGGBB
,如果 #f3f3f3
,代表 f3
(16 進位制)數量的紅-綠-藍。如果紅-綠-藍數值兩兩相等,如 #ffffff
,就可以簡寫成 3 位 16 進位制的形式 #fff
。在高版本的瀏覽器還可以用 16 進製表示透明度 #RRGGBBAA
, AA
的取值範圍是 0
到 255
,如果兩兩相等也可以簡寫成 #RGBA
形式。
hsl、hsla
hsl
函式是用色相-飽和度-明度(Hue-saturation-lightness)來表示顏色, HSL
相比 RGB
的優點是更加直觀:你可以估算你想要的顏色,然後微調,比如要找到一個顏色的相近色,只需調整一下明度就行了。
色相(Hue)表示色環(即代表彩虹的一個圓環)的一個角度。這個角度作為一個無單位的 被給出,大致按照數值紅、橙、黃、綠、青、藍、紫變化節奏。取值範圍是 0
到 360
飽和度,取值 0%
到 100%
,100% 是滿飽和度,而 0% 是一種灰度。 明度,取值 0%
到 100%
,100% 明度是白色, 0% 明度是黑色,而 50% 明度是“一般的”。
hsla
和 rgba
相似其中的 a
設定透明度,取值範圍也是 0
到 1
。
系統顏色
系統顏色就是系統的顏色,不同的系統支援的顏色可能不同,一般很少使用。但是我們可以利用它實現系統主題風格類似的 Web 元件面板效果,來以假亂真。

背景
CSS2.1中有5個 background
屬性可以用來控制元素的背景。
background-color background-image background-repeat background-attachment background-position
為了更好的駕馭背景圖片,CSS3添加了3個新的 background
相關屬性。
background-clip background-origin background-size background-blend-mode
CSS3 中還添加了多背景漸變等等新特性。
background-image
為元素設定一個或多個背景影象。 background-image
在 background-color
之上、 border
之下渲染。也就是一個同時設定了 background-color
和 background-image
那麼 background-image
會覆蓋 background-color
。
background-image
的值是一個圖片或多個圖片(用 ,
分隔)。
div { background-image:url("a.jpg"), url("b.jpg"); } 複製程式碼
linear-gradient()
建立一個表示兩種或多種顏色線性漸變的圖片。CSS 漸變沒有固定大小也沒有固定寬高比,它只等設定漸變角度、漸變顏色和漸變梯度。
linear-gradient
的語法是 [角度(角度或關鍵字)], 顏色 [梯度]
,它們用 ,
分隔,角度可選預設時從上到下漸變。
顏色關鍵字是 to left
, to top
, to left top
等位置關鍵字。
div { background-image: linear-gradient(90deg, rgba(255, 255, 255, .5), orange 70%, #000), linear-gradient(red, orange 70%, #000); } 複製程式碼

repeating-linear-gradient()
一個由重複線性漸變組成的圖片。它的語法和 linear-gradient
類似。
div { background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, #000 25px, #000 50px); } 複製程式碼

radial-gradient()
建立一個徑向漸變(由原點(漸變中心)輻射開的顏色漸變)的圖片。
radial-gradient()
的語法是 邊緣輪廓的具體位置 形狀 漸變中心
後面是 顏色
用 ,
分隔。
div { background: radial-gradient(circle closest-side at 50px 30px, yellow, red 5%, orange, #fff, #000); } 複製程式碼

其中 邊緣輪廓的具體位置 形狀 漸變中心
都是可選。
形狀值可以為 circle
和 ellipse
預設 ellipse
。
漸變中心是 at
後的座標點,預設元素中心點。
邊緣輪廓的具體位置可以為如下關鍵字:
closest-side closest-corner farthest-side farthest-corner
預設是 farthest-corner
。
div { position: relative; width: 262px; height: 262px; border-radius: 50%; background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px); background-size: 50% 100%, 100% 50%, 100% 100%; } div:after { position: absolute; top: 50%; left: 50%; margin: -35px; border: solid 1px #d9a388; width: 68px; height: 68px; border-radius: 50%; box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33; background: #b5ac9a; content: ''; } 複製程式碼

repeating-radial-gradient()
建立一個從原點輻射的重複漸變組成的圖片 。它類似於 radial-gradient
並且採用相同的引數,但是它會在所有方向上重複顏色,以覆蓋其整個容器。
div{ background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%); } 複製程式碼

想要更多的漸變效果可以參考這個網站。
conic-gradient()
建立一個錐形漸變的圖片。 conic
漸變類似於 radial
漸變,但是它的顏色位於圓的周圍。

它的語法是: [from 角度]? [at 位置]?, 顏色 角度...
div{ background: conic-gradient(from 0deg at 50px 100px, orange 0.2turn, #fff 0.09turn 0.3turn, orange 0.27turn 0.54turn); border-radius: 50%; } 複製程式碼

background-repeat
定義背景影象的重複方式。背景影象可以沿著水平軸,垂直軸,兩個軸重複,或者根本不重複。
它有 6 個值:
-
repeat-x
相當於repeat no-repeat
-
repeat-y
相當於no-repeat repeat
-
repeat
相當於repeat repeat
-
space
相當於space space
-
round
相當於round round
-
no-repeat
相當於no-repeat no-repeat
space
影象會盡可能得重複, 但是不會裁剪. 第一個和最後一個影象會被固定在元素(element)的相應的邊上, 同時空白會均勻地分佈在影象之間. background-position
屬性會被忽視, 除非只有一個影象能被無裁剪地顯示. 只在一種情況下裁剪會發生, 那就是影象太大了以至於沒有足夠的空間來完整顯示一個影象。

round
隨著允許的空間在尺寸上的增長, 被重複的影象將會伸展(沒有空隙), 直到有足夠的空間來新增一個影象. 當下一個影象被新增後, 所有的當前的影象會被壓縮來騰出空間. 例如, 一個影象原始大小是260px, 重複三次之後, 可能會被伸展到300px, 直到另一個影象被加進來. 這樣他們就可能被壓縮到225px.

效能
一般我們會用一個的背景小圖片不斷重複來達到一些效果,為了請求優化一般會把小圖片擷取到 1px * 1px 大小,但是這樣渲染次數太多,有時候會有明顯的卡頓,我們可以將尺寸擷取大一點這樣圖片大小沒大多少,但是渲染效能卻有明顯提升。
background-blend-mode
定義該元素的背景圖片,以及背景色如何混合。
它就像 PS 中的混合模式。可以做一些 正片疊底,濾色等效果。
它的語法為,單值或者雙值(用 ,
分開)。
它的值有:
normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity
background-attachment
如果指定了 background-image
,那麼 background-attachment
決定背景是在視口中固定的還是隨包含它的區塊滾動的。
它的值為:
scroll local fixed
我們一般只使用 fixed
這個值,讓背景圖片不隨著滾動而滾動。
background-position
為每一個背景圖片設定初始位置。屬性被指定為一個或多個位置值,用逗號隔開。
預設位置是 padding-box
的左上角。
它的值可以是 left
, top
這些位置關鍵字,還可以是長度值和百分比。
div { background-position: 50% 10px, center, left bottom; /* 分別設定三張背景圖片的位置 */ } 複製程式碼
background-origin
指定背景圖片 background-image
屬性的原點位置的背景相對區域。當使用 background-attachment
為 fixed
時,該屬性將被忽略不起作用。
它的值可以是:
padding-box border-box content-box
background-clip
設定元素的背景(背景圖片或顏色)是否延伸到邊框下面。
它的值可以是:
border-box padding-box content-box text
background-size
設定背景圖片大小。圖片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。
對於多背景用 ,
分隔。
它的值可以是長度值和百分比還有下面的關鍵字
-
auto
以背景圖片的比例縮放背景圖片 -
cover
縮放背景圖片以完全覆蓋背景區,可能背景圖片部分看不見。和contain
值相反 -
contain
縮放背景圖片以完全裝入背景區,可能背景區部分空白

background
一種簡寫屬性,用於一次性集中定義各種背景屬性。它可以簡寫的屬性有 background-clip
、 background-color
、 background-image
、 background-origin
、 background-position
、 background-repeat
、 background-size
,和 background-attachment
。
簡寫的方式有:
color image repeat box color repeat position[ / size]? image image position[ / size]? repeat attachment clip origin color image position[ / size]? repeat attachment clip origin
clip-path
clip-path
用來剪下元素,代替了現在已經棄用的剪下 clip
屬性。它建立一個剪下區域,區域內的部分顯示,區域外的隱藏。
clip-path
的值可以為:
-
none
- 連結資源,如
url(resources.svg#c1)
- 盒子值,一共有 7 個
margin-box border-box padding-box content-box fill-box stroke-box view-box
- 形狀函式(相當於 SVG 中的形狀元素)
inset() circle() polygon() path()
- 盒子和形狀結合值
clip-path: padding-box circle(50px at 0 100px);
clip-path
用的最多的值就屬 polygon
函式,它的引數由一堆 x y
座標點組成。
如 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
。是一個三角形。它可以接受無限個引數,每個引數都是 x y
座標,最終顯示的形狀就是這些座標連線成的形狀。這裡有一個網站可以幫助建立形狀。
clip-path
也可以使用 transition
屬性讓它有動畫效果,不過需要變動前後的座標點數量必須相同。