關于 background-image 漸變gradient()那些事！

大家好，我是半夏??，一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章，可以關注? 點贊 ?? 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公眾號：搞前端的半夏,了解更多前端知識! 點我探索新世界！

原文鏈接 ==>http://sylblog.xin/archives/37

漸變拼音jiàn biàn，意思是一種有規律性的變化，漸變能給人很強的節奏感和審美情趣，這種形式在日常生活中隨處可見，是一種常見的視覺形象，由于繪畫中透視的原理，物體就會出現近大遠小的變化，許多自然理象都充滿了漸變的形式特點，運用漸變技術能使畫面更加豐富，給人視覺更強的沖擊力，

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 );

標籤：Html/Css

上一篇：如何從子檔案陣列中的專案中進行$lookup？

下一篇：復習 - ajax