[1.1W字] 複習: CSS 9個背景屬性&6種漸變函式, 學會可以手寫實現AI中強大的"任意漸變"! #Archives009

Title/ CSS Background&Gradient完全指南 #Archives009

序:

關於 background 屬性, 瞭解點CSS的人總會知道個大概.

但是你肯定多半還有點不會的吧(別在這裝!), 比如你能手寫CSS的6個漸變函式嗎? 你知道bg-repeat中space和round的作用嗎? 你能用純CSS實現AI中的"任意漸變"嗎?

這篇文章詳細的整理了一遍CSS的Background和Gradient屬性的各種詭異用法.

當然照顧萌新, 講的會比較完整和基礎, 進階開發者可以只關心你需要的內容, 不必順序閱讀.

簡介:

一篇最全CSS背景, 漸變教程!

注:

background 屬性在本文中會圖個方便縮寫為bg, 不過在CSS中不能這樣簡寫.

Tag/ Background介紹

CSS 屬性 background 可以為網頁上的元素製作出來各種豐富多彩的背景.

不僅可以搞6種漸變色, 還可以在一個元素疊加多個背景, 在實現一些複雜效果的時候還是蠻有用的.

來段程式碼:

element {

    background:

        url(mi_logo.svg)    /* image */

        top center / 20px 20px /* position / size */

        no-repeat /* repeat */

        fixed /* attachment */

        padding-box /* origin */

        content-box /* clip */

        orange /* color */

}

上面就是 background 屬性的大致使用方法了. background 屬性也可以進行疊加:

ele {

   background: cornflowerblue, url("ruok.svg");

}

屬性之間用空格分開, 不同背景層之間用逗號分開.

Tag/ Background相關屬性

background

這個屬性是background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size 和 background-attachment 屬性的 CSS簡寫屬性, 接下來介紹每個屬性的用法.

可取值:
```
background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment, (another-bg);

/* 部分屬性之間可以交換位置, 要注意 bg-position/bg-size 中間的 / 不能省略. */
```
background-color

指定了背景顏色, 值為 <color>, 預設值是 transparent.
background-image

指定了一張背景圖片, 可以是 url(...)(圖片的資源地址, 作為背景圖片插入網頁), 可以是 <color>(可以理解為一張純色圖片), 也可以使用 CSS漸變函式(一張漸變色的圖片).

而CSS漸變使用是真的很複雜, 為了方便閱讀這裡只作引用, 使用方法和函式會在本文的 ->> Details 中完整的展開介紹.

background-position

指定背景圖片的位置, 預設值為 center, 這個位置是相對於 background-origin 而言的.

可取值:

/*單位可以是 <length>, <percentage> 或者關鍵字, 可取負值表示相反方向偏移*/

/*關鍵字: top, bottom, left, right, center. */

background-position: 50px; /*一個值: 指定x座標的值, 另一個值為center(預設值)*/

background-position: top; /*一個值(關鍵字): 指定該關鍵字表示的值, 另一個值為center.*/

background-position: 100px 75%; /*兩個值: 分別是x座標和y座標的值*/

background-position: bottom 25% right; /*三個值(關鍵字 值 關鍵字): 指定距離邊際的距離(比如本例是距離底部25%長, 與右邊貼合.)*/

background-position: top right 50px; /*三個值(關鍵字 關鍵字 值): 指定距離邊際的距離(本例是距離右邊50px, 貼合頂部.)*/

background-position: bottom 25% left 50px; /*四個值(關鍵字 值 關鍵字 值): 指定距離邊際的距離(本例是距離底部25%長, 距離左邊50px).*/

background-size

指定背景圖片的大小, 預設值為 auto.

可取值:

/*單位可以是 <length>, <percentage> 或者關鍵字*/

/*關鍵字: contain(按比例縮放, 以較短邊為圖片大小填滿背景區域), cover(按比例縮放, 以較長邊為圖片大小填滿背景區域), auto(按比例縮放, 預設為原始大小)*/

background-size: 50px; /* 一個值: 指定圖片的寬度, 圖片的高度為auto(預設值), 即按比例縮放大小*/

background-size: auto 5em; /* 兩個值: 分別指定圖片的寬高*/

background-repeat

指定背景圖片的重複排列方法, 預設值為repeat.

/*一個值: 同時指定x軸和y軸的重複排列方法.*/

background-repeat: repeat; /*按需重複背景圖片來覆蓋整個背景區域. 在大小不夠的情況下, 邊緣的圖片會被裁剪.*/

background-repeat: space; /*重複背景圖片來覆蓋整個背景區域, 但是不會裁剪圖片. 邊緣影象會被固定邊上, 同時空白會均勻地分佈在影象之間. background-position屬性會被忽視, 除非只有一個影象能被無裁剪地顯示. 只在一種情況下裁剪會發生, 那就是影象太大了以至於沒有足夠的空間來完整顯示一個影象.*/

background-repeat: round; /*重複背景圖片並按比例縮放以填充空間, 不會有空隙.*/

background-repeat: no-repeat; /*不重複背景影象.*/

/*兩個值: 分別指定x軸和y軸的重複排列方法.*/

background-repeat: space round; /*分別指定X軸和Y軸的重複方式為 space 和 round.*/

/*簡寫方法*/

background-repeat: repeat-x; /*作用與 repeat no-repeat 相同*/

background-repeat: repeat-y; /*作用與 no-repeat repeat 相同*/

background-origin

指定背景圖片的起始點位置, 預設值為 padding-box.

特殊地, 當 background-attachment 屬性值為 fixed 時, 該屬性將被忽略不起作用.

可取值:
```
background-origin: border-box; /*背景圖片左上角座標位於 border-box 位置*/

background-origin: padding-box; /*背景圖片左上角座標位於 padding-box 位置*/

background-origin: content-box; /*背景圖片左上角座標位於 content-box 位置*/
```
See Also:

一個LiveDemo https://tympanus.net/codrops/css_reference/background-origin/

bg-origin和bg-clip區別(截圖) https://www.cnblogs.com/shytong/p/5077129.html

background-clip

指定背景(圖片和顏色)延伸到哪個盒子, 預設值為 border-box.

可取值:

background-clip: border-box; /*背景延伸到 border-box*/

background-clip: padding-box; /*背景延伸到 padding-box*/

background-clip: content-box; /*背景延伸到 content-box*/

background-clip: text; /*(Experimental) 背景填充文字*/

background-attachment

指定背景影象的位置在元素內的滾動方式(固定還是隨著元素滾動), 預設值為 scroll.

可取值:

background-attachment: fixed; /*表示背景相對於視口固定. 即使一個元素擁有滾動機制, 背景也不會隨著元素的內容滾動.*/

background-attachment: local; /*表示背景相對於元素的內容固定. 如果一個元素擁有滾動機制, 背景將會隨著元素的內容滾動, 並且背景的繪製區域和定位區域是相對於可滾動的區域而不是包含他們的邊框.*/

background-attachment: scroll; /*表示背景相對於元素本身固定, 而不是隨著它的內容滾動(對元素邊框是有效的)*/

->> Details

`background-image` - `CSS漸變`函式

序:

按說 CSS Gradient 這個專題可以獨自成文了, 所以獨立的寫一個序.

關於CSS漸變雖然大家都或多或少了解一些, 但是其實這個內容非常複雜, 大多數人都只是停留在表面(比如只會寫最基本的兩種漸變方法).

但是你比別的普通前端厲害的地方就體現於你是否知道別人不懂的東西! 而這個CSS漸變在UI設計中也是很常用的, UI設計師很可能為了折磨前端, 做一些神奇又複雜的漸變.

比如你在實戰中要還原設計稿, Adobe Illustrator裡的漸變也可一點也不簡單(圖片來自Adobe官網).

比如上圖中, Adobe就採用了"任意漸變"的Gradient Type.

這個任意漸變的設計稿, 要你來實現, 大概會說: 這個漸變都不是在一條線的(到處都有黑色和白色的色標), 用一般的漸變根本沒法實現啊...

所以解決方法可能是用AI匯出含漸變色的png(AI預設匯出svg時就是這樣實現的), 然後用bg-image(或者bg-clip: text)來新增到前端.

倒不是這種方法不好, 只要能實現效果, 任何方法都是OK的.

只是我覺得知難而退, 不肯鑽研的的學習態度不是很好. 所以現在把它弄明白吧!

看到這裡你肯定已經猜到了, 純CSS是可以實現"任意漸變"的!!! ->> 看下面!
background: radial-gradient(ellipse at right, #f18a89, transparent),

            radial-gradient(ellipse at bottom, #e16259, transparent),

            radial-gradient(ellipse at left, #abdcef, transparent),

            linear-gradient(#fffefc, transparent);
好, 那它會有什麼效果呢?

是不是有內味了? 只要把顏色換成黑色和白色, 調整一些引數, Illustrator中的"任意漸變"好像也不是那麼複雜!

可是現在網上的關於CSS漸變的完整資料非常少, 連MDN目前都有中文支援性問題(見下圖, 翻譯了一半就全是英文了), 所以我讀英文官方文件看了半天才搞懂啊qwq...

而且菜鳥教程(runoob.com) 和W3School文件, 目前都只說有兩個函式(最常用的線性漸變和徑向漸變), 只介紹了最基礎的使用方法, 而這在實戰很多情況是不夠的.

所以我決定把我的理解以最通俗易懂的方式放在這裡, 分享給大家一篇(目前可能也是唯一一篇)最完整的中文文件.

準備好了沒? 重頭戲開始了!

CSS <gradient> 是 <image> 型別的一種, 所以不只是 background 可以用到它, border-image 等只要是圖片都能用.

目前支援6種CSS漸變函式, 有3種是基本函式, 另外的3種都是重複漸變(湊數的)

linear-gradient()(線性漸變)

語法:

background: linear-gradient(angle, stop1, stop2, ...);

/*angle可選, 預設值為 to bottom. stop為色標*/

linear-gradient(#e66465, #9198e5);

/*從上到下過渡荔枝紅到鼠尾草藍*/

linear-gradient(90deg, green, yellow);

/*angle設為90度, 表示從左到右*/

linear-gradient(to left, orange, yellow);

/*

to <direction> 關鍵字, 表示漸變方向, 可取值有:

to top = 0deg, to bottom = 180deg, to left = 270deg, to right = 90deg

*/

linear-gradient(to right bottom, black, white)

/*可以同時定義兩個 <direction>, 表示向某個角漸變.*/

linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);

/*0.25turn關鍵字, 表示從左到右. turn前的數字可以是 <percentage>, 表示旋轉的大小.*/

linear-gradient(#3f87a6, #ebf8e1 10% 50%, #f69d3c 30%);

/*

對於每一個色標(<linear-color-stop>), 顏色後的 <percentage> 表示色標的所處區域, 如果有一個百分比表示色標的位置, 如果有兩個表示一個區間.

如果不設定位置, 則為最相鄰兩個位置的平均值. 如果色標之間有重疊, 定義在之前的會覆蓋之後的.

*/

linear-gradient(pink, 25%, orange);

/*

可以在兩個色標之間加入 <percentage> 表示二者的過渡比例(<color-hint>), 如這個例子中粉色少, 橙色多.

具體的計算方法為: 在粉色和橙色兩端中間隱式新增一個色標位於25%的點, 顏色是二者的平均值, 然後讓二者都向這個新增的色標過渡.

*/

radial-gradient(徑向漸變)

語法:

background: radial-gradient(position, stop1, stop2, ...)

/*position可選, 預設值為 center.*/

radial-gradient(lime, yellow);

/*從內到外過渡青色到黃色*/

radial-gradient(circle, lime, yellow);

/*

可以指定漸變形狀(<ending-shape>), 預設值為 ellipse, 即會根據元素的長寬比對橢圓進行拉伸.

這裡定義了 circle, 無論元素多大, 漸變色都是一個正圓.

具體的計算方法為: ellipse是根據長寬進行拉伸, circle是根據對角線的一半長度進行漸變.

*/

radial-gradient(circle at 50px 25%, lime, yellow);

/*可以用 at 關鍵字指定位置(<position>), 表示漸變的起始點位置*/ 

radial-gradient(50px circle, lime, yellow);

radial-gradient(30px 20px ellipse, lime, yellow);

/*可以在形狀前新增 <length> 指定在圓的半徑, 如果是橢圓可以有兩個分別是橫向和縱向.*/ 

radial-gradient(closest-side circle at 50px 25%, lime, yellow);

/*

有4個關鍵字可以指定漸變的終止點(也就是漸變區域的大小, <size>), 預設值為 farthest-corner, 新增在第一個引數中:

closest-side : 漸變中心距離容器最近的邊作為終止位置

closest-corner : 漸變中心距離容器最近的角作為終止位置

farthest-side : 漸變中心距離容器最遠的邊作為終止位置

farthest-corner : 漸變中心距離容器最遠的角作為終止位置

*/ 

radial-gradient(circle, green 20%, lime, yellow 10% 50%);

/*

可以在色標(<linear-color-stop>)後面新增一個或者兩個 <percentage> 表示漸變區間.

用法和作用與 linear-gradient() 中相同.

*/ 

radial-gradient(closest-side circle at 50px 25%, lime, 20%, yellow);

/*

可以在兩個色標之間加入 <percentage> 表示二者的過渡比例(<color-hint>).

用法和作用與 linear-gradient() 中相同.

*/

conic-gradient(圓錐漸變)

語法:

background: conic-gradient( from <angle> at <position>, <angular-color-stop-list>);

/*from <angle> 和 at <position>可選. <angle> 預設值為 0deg, <postion> 預設值為 center*/

conic-gradient(from 45deg, black, white);

/*from <angle> 指定起始角度*/

conic-gradient(from 45deg at 25% 50px, black, white);

/*at <position> 指定中心點位置*/

conic-gradient(from 45deg at 25% 50px, black, 75%, white);

/*同樣可以指定過渡比例(<color-hint>)*/

, 5. , 6. repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient()(重複漸變)
```
background:

 repeating-radial-gradient(

   circle at 0 0,

   #eee,

   #ccc 50px

 );
```
上面程式碼會顯示這樣的影象:

重複漸變的語法與所對應的基本漸變完全一致, 但會根據原影象進行重複填充.

哈~ OK了, 如果下次遇到關於Background&Gradient有不會的, 可以直接在這篇文章按 ctrl(mac: command)+f 速查. 或者有需要可以收藏.

->> See also

Gradienta - 體驗線上編輯CSS背景漸變 https://gradienta.io/

Codepen - Explaining gradient angles https://codepen.io/thebabydino/full/qgoBL

MDN - 漸變:

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient()

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient()

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-radial-gradient()

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-conic-gradient()

->> Reference link

MDN中文文件 https://developer.mozilla.org/zh-CN/docs/Web/CSS/background

MDN 英文文件 https://developer.mozilla.org/en-US/docs/Web/CSS/background

張鑫旭 https://www.zhangxinxu.com/wordpress/2017/11/css3-radial-gradient-syntax-example/

CSS-Tricks https://css-tricks.com/snippets/css/css-repeating-gradients/

菜鳥教程 https://www.runoob.com/cssref/css3-pr-background.html

Sara Cope https://css-tricks.com/almanac/properties/b/background/

掘金 - CSS Background 屬性詳解 https://juejin.cn/post/6844903463273381901

MDN - 使用CSS漸變 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

->> Version History

現在版本為V1.0

詳見 Github(@flightmakers)

2021.8.25(本來計劃是2021.8.19的, 但是最後失敗了) 釋出V1.0

終於寫完啦(學廢了)! 感覺有收穫, 小明反手就給了個贊! 對我的另外一些作品感興趣(比如JS this完全指南, 正則完全指南, Matrix()完全指南)可以進我主頁繼續學習! (cnblogs, Bilibili, Github都是一個名, 叫忘我思考(@flightmakers)

[1.1W字] 複習: CSS 9個背景屬性&6種漸變函式, 學會可以手寫實現AI中強大的"任意漸變"! #Archives009