大家好，我是半夏👴，一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章，可以關注➕ 點贊 👍 加我微信：frontendpicker，邀你進群，一起學習交流前端，成為更優秀的工程師～關注公衆号： 半夏話前端 ,了解更多前端知識！ 點我 探索新世界！
前言
在前面三篇文章中，剖析了CSS中的文本屬性，俗話說一圖勝千言，網頁中一張好看的圖檔，配上精美的文字，定能吸引眼球。
background-image-設定元素的背景圖檔
定義
将圖形（例如 PNG、SVG、JPG、GIF、WEBP）或漸變應用于元素的背景。
有兩種不同類型的圖像可以包含在 CSS 中：正常圖像和漸變。
屬性值
url(‘URL’)
圖像的URL
background-image: url(./bk.jpg); none
預設值，無圖像
漸變
linear-gradient() 線性漸變
預設是從上往下建立一個線性漸變的圖像
background-image: linear-gradient(#55efc4,#a29bfe); 
文法
background-image:linear-gradient(角度/to，顔色，顔色 開始漸變的位置, ......)；
background-image:linear-gradient(),linear-gradient()...; 根據文法，合理猜測，從上往下，預設是180deg或者 to bottom,
浏覽器預設會把第一個顔色的位置設定為0%，把最後一個顔色的位置設定為100%
舉例1 deg
background-image: linear-gradient(45deg,#55efc4,#a29bfe); 
舉例2 to文法
background-image: linear-gradient(to left top,#55efc4,#a29bfe); 舉例3 多顔色以及位置
linear-gradient(#55efc4,#a29bfe 30%,#fd79a8 50% ) 接收多個linear-gradient
錯誤例子
background-image: linear-gradient(45deg,#55efc4,#a29bfe,linear-gradient( #d63031,#e84393);
第二個漸變并沒有出現，這是因為第一個漸變是從0-100%的，占滿了整個元素，是以第二個沒有出現。
正确示例，使用transparent
使用transparent *%；的方式來将部分空間來透明化，進而顯示其他漸變。
background-image: linear-gradient(45deg,#55efc4,#a29bfe,transparent 50%),linear-gradient( #d63031,#e84393);
radial-gradient() 徑向漸變
徑向漸變建立 “圖像”。 從中心往四周,發散的形狀是圓形或者橢圓形
background-image: radial-gradient([形狀 大小 at(位置)],開始顔色，......,終止顔色); 形狀
ellipse (預設): 橢圓形的徑向漸變。
background-image: radial-gradient( #48dbfb,#ee5253);
circle ：圓形的徑向漸變
background-image: radial-gradient( circle,#48dbfb,#ee5253);
size
farthest-corner (預設) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
background-image: radial-gradient(closest-side ,#48dbfb,#ee5253);
closest-corner ： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角
background-image: radial-gradient(closest-corner at 20%,#48dbfb,#ee5253);
farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
background-image: radial-gradient(farthest-side at 20%,#48dbfb,#ee5253);
at（位置）
at center（預設）：中間為徑向漸變圓心的縱坐标值。
background-image: radial-gradient(at center,#48dbfb,#ee5253);
at top：頂部為徑向漸變圓心的縱坐标值。
background-image: radial-gradient(at top,#48dbfb,#ee5253);
at bottom：底部為徑向漸變圓心的縱坐标值。
background-image: radial-gradient(at top,#48dbfb,#ee5253);
at 值：值所在位置為徑向漸變圓心的橫坐标值。
background-image: radial-gradient(at 1590px,#48dbfb,#ee5253);
conic-gradient 圓錐漸變
圓錐漸變類似于徑向漸變。兩者都是圓形并使用元素的中心作為色标的源點。然而，在徑向漸變的色标從圓心出現的地方，圓錐漸變将它們放置在圓周圍。
制作一個 位于[某個點]的 圓錐梯度，該 漸變以 某個角度的[一種顔色] 開始， 并 以 [某個角度] 的[另一種顔色]結束
大概就是下面這麼個效果，從
conic-gradient(
[ from <angle> ]? [ at <position> ]?,
<angular-color-stop-list>
) 舉例1 隻有漸變色
background-image: conic-gradient(#2ecc71, #e52e71); 舉例2 at文法 規定中心點位置
background-image: conic-gradient(at 30% 40%, #2ecc71, #e52e71); 舉例3 from文法，規定圓錐初始位置
background-image: conic-gradient(from 45deg, #2ecc71, #e52e71); 舉例4 from at 同時使用
background-image: conic-gradient(from 45deg at 30% center, #2ecc71, #e52e71);
舉例5 顔色後面+百分比
background-image: conic-gradient(#2ecc71 70%, #3498db, #e52e71);
舉例6 顔色後面+角度/turn
background-image: conic-gradient(#2ecc71 45deg, #e52e71 0.5turn );
repeating-linear-gradient()
建立重複的線性漸變 “圖像”。
這個屬性與liner-gradlient的參數用法一緻，
差別就是
隻有當首尾兩顔色位置不在0%或100%時，會産生重複漸變
background-image: repeating-linear-gradient( #48dbfb,#ee5253);
這種方式就無法産生漸變
background-image: repeating-linear-gradient( #48dbfb,#ee5253 10%);
repeating-radial-gradient()
建立重複的徑向漸變 “圖像”
這個屬性與radial-gradlient的參數用法一緻，
隻有當初終兩顔色位置不在0%或100%時，會産生重複漸變
background-image: repeating-radial-gradient( #48dbfb,#ee5253);
background-image: repeating-radial-gradient( #48dbfb,#ee5253 );