Css - background 終極探究

前言

做爲程序員，技術的落實與鞏固是必要的，所以想到寫個系列，名爲 why what or how 每篇文章試圖解釋清楚一個問題。

此次的 why what or how 主題：如何使用背景，或者說如何將背景使用到極致？

背景，做爲 css 中的老牌屬性，相信你們並不陌生，相關屬性有的也很多，但願你們在看這篇文章時，先放下對背景的固有印象，跟着下面的思路來深刻的瞭解下瀏覽器是如何使用這些屬性的。

既然想要深刻了解，cosplay 成瀏覽器體驗一把背景繪製是再好不過的了。

那麼咱們正式成爲瀏覽器，拿起畫筆，畫出代碼所規定的背景。

繪製

假設瀏覽器也就是咱們，須要解析如下這段 css 併爲元素繪製背景。

.box1 {
    background-color: #000;
    background-image: url(image.png);
    background-size: 40px 40px;
    background-origin: border-box;
    background-position: 10px 10px;
    background-repeat: repeat;
    background-clip: content-box;
}
複製代碼

根據繪畫經驗，畫一幅圖片大體須要如下前置步驟：

1. 將畫布染上基礎色，通常的繪畫前都會有這一步。
2. 構思繪畫內容，畢竟構思好才能畫好嘛。
3. 肯定內容的繪製大小。

那麼按照繪畫的步驟，咱們先作好預備工做：

1. 將畫布染成黑色，由 bg-color 所肯定。
2. 肯定繪畫內容，由 bg-image 所肯定。
3. 繪製大小爲 40px * 40px，由 bg-size 所肯定。

接着咱們須要將構思好的畫畫在畫布上，該如何提筆繪畫？這時就須要肯定如下幾點：

1. 這畫的起始點在哪？
2. 是否須要重複繪製，直到畫滿整張畫布？

那麼對應到這，是這樣的：

1. 將圖片放在距離 bg-origin 所規定的基準點處，而後偏移 (10px, 10px) ，偏移量由 bg-position 所肯定。
2. 上下左右複製該圖片，直到鋪滿整張畫布，由 bg-repeat 肯定是否重複平鋪。

如今咱們獲得了一張畫好了的畫布，也就是有了內容的元素背景，那麼就結束了嗎？

不，還有一個屬性沒有用到 bg-clip，該屬性規定元素該如何使用背景，根據設置，元素內容對應的畫布區域將保留，其餘的部分將被棄用。

通過以上 6 個步驟，就能成功的將元素畫上背景，上面步驟咱們清楚了具體屬性的做用，接下來講說屬性所表明的具體含義。

背景屬性

根據上面每一個步驟中所使用到的 css 屬性，一一解釋。

background-color

設置畫布背景色，也就是將畫布染個色，支持顏色關鍵字，16 進制色值，rgb，rgba，hsl，hsla 寫法。

background-image

肯定須要繪製的內容，支持以下寫法

類型	值	含義
連接	url()	引用圖片連接，包括使用資源地址以及 base64 形式的圖片
漸變	xxx-gradient()	使用漸變做爲圖片
none	none	不使用背景圖

background-size

肯定繪圖區域的大小，支持以下寫法：

類型	值	含義
關鍵字	contain	繪圖區域大小爲圖片原比例，而且該區域能正好放在該元素內
關鍵字	cover	繪圖區域大小爲圖片原比例，而且該區域恰好能徹底鋪滿元素
長度	<length> <length>	分別規定繪圖區域的長寬
長度	<length>	繪圖區域長寬一致爲，爲上訴狀況的縮寫
默認	auto auto	繪圖區域爲圖片的原始大小

注1： <length> 表明全部合法的長度單位，包括 px、em 等固定長度以及百分比長度，以及 auto，auto爲圖片的原始大小。 注2： 該屬性設置的是 bg-image 圖片的大小，並非背景的大小。

background-origin

肯定繪製區域的基準點，支持以下寫法：

類型	值	含義
關鍵字	border-box	以元素（畫布）的 border 區域的左上角爲基準點
關鍵字	padding-box	以元素（畫布）的 padding 區域的左上角爲基準點
關鍵字	content-box	以元素（畫布）的 content 區域的左上角爲基準點
默認值	padding-box	---

background-position

肯定繪製區域距基準點的偏移量，支持以下寫法：

類型	值	含義
單關鍵字	top/bottom/left/right/center	將繪製區域放置在規定處，因爲單關鍵字僅規定了一個方向，上下或左右，另外一側居中
雙關鍵字	例：left top	關鍵字類型與單關鍵字一致，分別規定了水平和垂直方向上的位置
雙長度	<length> <length>	分別規定了距離基準點水平和垂直的偏移量
單長度	<length>	僅設置水平平移量，垂直爲居中，效果爲 <length> center
默認值	0 0	偏移量爲 0，也就是不偏移

注： 若是使用關鍵字規定繪製區域的位置，則最終的位置與基準點無關，僅與元素（畫布）大小有關。

background-repeat

肯定繪製區域是否以及如何重複鋪滿整個元素（整張畫布），支持以下寫法：

類型	值	含義
關鍵字	repeat-x	繪製區域水平重複鋪滿
關鍵字	repeat-y	繪製區域垂直重複鋪滿
關鍵字	repeat	繪製區域水平垂直都鋪滿
關鍵字	no-repeat	繪製區域不重複平鋪
關鍵字	space	在圖像不縮放不被裁剪的狀況下，儘量的平鋪
關鍵字	round	在圖像能夠縮小不被裁剪的狀況下，儘量的平鋪
雙關鍵字	---	<x軸設置> <y軸設置> 使用上述關鍵字分別規定水平垂直效果
默認值	no-repeat	---

注： 最後兩種關鍵字使用場景不大，不被裁剪指在 background-origin 所指明的盒子中儘量的放入該元素，根據關鍵字的不一樣效果也不同

• space 使用該關鍵字後，背景位置不受 background-position 影響，水平垂直方向都儘量的使用背景圖，剩餘空間會均分在背景圖間
• round 使用該關鍵字後，瀏覽器計算出元素在水平垂直方向最多能放的圖片後，多使用一張背景圖，並將背景圖總體縮小以適應元素大小，以後根據 background-position 放置背景圖，而後水平垂直平鋪。

這兩個關鍵字理解起來比較複雜，建議寫個例子仔細研究。

background-clip

移除畫布上不須要的部分，支持以下寫法：

類型	值	含義
關鍵字	border-box	移除 border 區域之外的內容
關鍵字	padding-box	移除 padding 區域之外的內容
關鍵字	content-box	移除 content 區域之外的內容
關鍵字	text	移除文字區域之外的內容
默認值	border-box	---

其餘屬性

繪製元素的背景僅須要以上 7 個屬性就能完成，background 還有兩個屬性，

1. 規定了畫布的顯示效果：background-attachment
2. 規定多背景時，背景的混合模式：background-blend-mode

background-attachment

規定圖層相對於什麼固定，支持以下寫法：

類型	值	含義
關鍵字	fixed	將畫布相對於視口（viewport）固定
關鍵字	scroll	將畫布相對於元素自己固定
關鍵字	local	將畫布相對於 Max(元素內容, 元素自己) 固定
默認值	scroll	---

在瞭解這個屬性前，咱們須要更正一下畫布的概念，在這以前，咱們把背景圖簡單的畫在了畫布上，也就是元素上，這是爲了方便你們理解，以及更好的敘述。

這裏明確指出，背景圖不畫在畫布上，而 bg-color 屬性，也只是將元素進行染色，背景圖與畫布是獨立的，在這裏引入一個圖層的概念，背景圖繪畫在單獨的圖層上，圖層由 background-attachment 決定如何繪製在畫布也就是元素上，當 background-attachment 爲默認的狀況時，圖層與元素一致，其預期徹底符合上訴的敘述，也就是 scroll 的效果。那麼在來解釋解釋另外兩個值的效果。

• fixed 圖層相對於視口固定，也就是整個 html ，background-origin 無效，基準點爲整個視口的左上角，不能改變，圖層大小爲視口大小，且不受容器位置影響，也就是始終固定在視口上。
• local 圖層相對於元素內容固定，圖層的大小爲 Max(元素內容, 元素自己)，也就是說會隨着內容的滾動而滾動。
• scroll 圖層相對於元素固定，圖層大小即爲元素大小，不跟隨內容滾動。

這個屬性用起來簡單，但理解起來較難，但願好好的理解下，ps：熟悉使用 PS 的小夥伴應該很容易就能理解。

具體的效果能夠查看 MDN 上對該屬性的介紹：background-attachment

固然能夠點擊查看示例：bg-attachment。

background-blend-mode

定義多背景時，最終背景的呈現效果。這個在多背景裏細說。

漸變

在介紹 background-image 時，提到過可使用漸變做爲背景圖，這裏就介紹介紹漸變的幾種類型，以及語法。

線性漸變

線性漸變效果如以下，須要設置漸變方向，以及過渡點，瀏覽器由規定的漸變方向漸變顏色。

語法以下

linear-gradient( [ <角度> | to <方向關鍵字> ]? , <停頓點列表> )
複製代碼

解釋

1. [] 內爲可選內容，用於規定線性漸變的方向，可直接使用角度或方向關鍵字，默認 180deg。
2. 角度：爲 0deg 時，漸變方向爲從元素底部到元素頂部，10deg 時，漸變方向順時針旋轉 10度。
3. 方向關鍵字：top/bottom/left/right，使用單個關鍵字時（如 top），關鍵字表明漸變方向的終點，使用雙關鍵字時（如 left top），關鍵字的組合表明漸變方向的終點。
4. 停頓點列表：色值與長度單位的組合，如 #000 100px，表明距離漸變起點 100px 處的顏色爲 #000。當長度爲 0% 或 100% 時，距離可不用寫。

例子

linear-gradient(to left, #333444, #333 10px, #eee 75%, #333 75%, #fff);
複製代碼

徑向漸變

徑向漸變效果以下，須要設置漸變圓心位置，以及過渡點，瀏覽器從規定的漸變圓心位置向外過渡到每一個過渡點。

語法以下

radial-gradient( [ <圓形效果> at <圓心位置> ]? , <停頓點列表> )
複製代碼

解釋

1. [] 內爲可選內容，用於規定正圓仍是橢圓，以及圓心位置，默認效果由元素肯定，圓心爲元素正中。
2. 圓形效果：circle/ellipse 分別表明正圓以及橢圓，正圓後可跟一個長度值，表明半徑；橢圓後可跟兩個長度值，表明水平半徑長以及垂直半徑長。
3. 圓心位置：由關鍵字或關鍵字組合或兩個長度值組成。單關鍵字僅表明了圓心的一個位置，另外一位置默認居中。
4. 停頓點列表與線性漸變一致。

一些例子

radial-gradient(circle, #000, #fff);

radial-gradient(circle at center, #000, #fff);

// 如下 4 條表明的內容一致
radial-gradient(circle at top, #000, #fff);
radial-gradient(circle at top center, #000, #fff);
radial-gradient(circle at 50% center, #000, #fff);
radial-gradient(circle at 50% 50%, #000, #fff);

// 如下 2 條內容一致，橢圓是特殊的圓
radial-gradient(circle 100px at 50% 50%, #000, #fff);
radial-gradient(ellipse 100px 100px at 50% 50%, #000, #fff);
複製代碼

錐形漸變

錐形漸變效果以下所示，須要設置變換起始軸，以及過渡點，瀏覽器由規定的變換起始軸繞一圈進行漸變，最後回到變換起始軸。

注： 若是沒有看到效果，請到 chrome 中打開。

語法以下

conic-gradient( [ from <起始軸角度> at <起始點> ]? , <停頓角度列表> )
複製代碼

解釋

1. [] 內爲可選內容，用於規定起始軸的角度和起始點，起始點爲元素正中，0deg 爲起始點向元素頂部，10deg 爲順時針旋轉 10deg。
2. 起始軸角度：默認 0deg 可用合法的角度單位，如 deg、turn、rad。
3. 起始點：由關鍵字或關鍵字組合或兩個長度值組成，單關鍵字僅表明了起始點的一個位置，另外一位置默認居中。
4. 停頓角度列表：由色值與角度單位組合而成，如 #000 30deg 表明距離起始軸順時針 30deg 的方向爲 #000。

小結

目前瀏覽器實現的漸變就僅有以上 3 種，其中錐形漸變的支持力度堪憂，僅有 Chrome 支持，可是使用線性漸變和徑向漸變已經可以應付對大多數的平常需求了。

多背景

背景相關的屬性總共有 9 種，除了 bg-color 外，其餘屬性與多背景都有關，若是想要設置多背景，僅需將屬性對應的值寫多個並用 ',' 隔開。

background-image:   url(a.png), url(b.png);
background-size:    10px 10px,  20px 20px;
background-origin:  padding-box,border-box;
// ...
複製代碼

通過上述的瞭解，相信你們也都清楚了：除 bg-color 其餘的背景屬性其實都是爲 bg-image 所服務的，仔細想一想是否是這樣？

所以多背景就能夠單純的理解爲多圖層，每一個圖層的是如何控制背景圖顯示在上述文章中已經解釋清楚，如今思考一個問題：圖層是如何進行疊加的，圖層的層疊順序如何？

能夠用一句簡單的話來歸納：先寫的圖層最後渲染，相似於一個棧；層疊效果由 background-blend-mode 所決定。

渲染順序很好理解，那麼 background-blend-mode 又是什麼？

background-blend-mode

該屬性規定了對應圖層該如何疊加到畫布上。

該屬性的值以下

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
複製代碼

具體的效果點擊查看：bg-blend-mode

小結

9 個屬性，其實也很少，只要結合上述的渲染過程，其實理解起來也不復雜。

對了，還有個複合屬性，這裏就不說了，不是由於懶，是由於不想說，能不用仍是不用吧，別和我說什麼傳輸字節少點什麼的，代碼是給人看的，寫那一堆想看懂都難，仍是不說了，固然若是是簡單的設置背景，一眼就能看明白的仍是建議使用複合屬性哈~

慣例提幾個問題

1. 背景的 9 個屬性是哪些？
2. 繪製步驟如何？
3. 圖層和畫布的關係？
4. 是否理解了 background-attachment ？

最後分享幾個騷操做

• css 漸變背景
• css 實現濾鏡效果1
• css 實現濾鏡效果2
• css 漸變效果
• css 漸變選擇1
• css 漸變選擇2

參考

• MDN background
• 難以想象的顏色混合模式 mix-blend-mode
• 純CSS圖片濾鏡項目CSSgram簡介

最後的最後

該系列全部問題由 minimo 提出，愛你喲~~~