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)