學透CSS-萬字長文助學圖片屬性（上）-背景圖片，圓錐/線性/徑向漸變 連載中

這是我參與8月更文挑戰的第10天，活動詳情查看：8月更文挑戰

讀不在三更五鼓，功只怕一曝十寒。看完以爲有收穫的，點個讚唄！！！

前言

在前面三篇文章中，剖析了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 );