CSS 背景圖樣漸層

這一篇要介紹的是：CSS 的漸層（gradient）

以下都以此 codepen 做範例

https://codepen.io/saffranwang/pen/byRxwd

---

• css 漸層是屬於「圖片background-image」，而不是「色彩background-color」

因此，漸層「無法使用 transition 效果」

• 「圖片background-image」不會產生漸變
• 「色彩」才會產生漸變

漸層分為兩大類

第一類漸層：線性漸層（linear-gradient）

漸層預設是「從上到下」

.bg-1{
	background-image: linear-gradient(lightblue, purple);
}

旋轉角度

有兩種方式：

• 加入「角度90deg」

.bg-1{
	background-image: linear-gradient(90deg, lightblue, purple);
}

• 加入「方向性的指引to right」

.bg-1{
	background-image: linear-gradient(to right, lightblue, purple);
}

第二類漸層：放射狀漸層（radial-gradient）

「多層重疊」的 background

background是可以做「多層重疊的」，放兩個以上的背景圖

範例

• 兩層linear-gradient重疊，用「線性漸層」製作出「放射狀漸層」的效果
• 兩個linear-gradient用「逗號」隔開
  • 第一段：由上到下
  • 第二段：由左到右

設定「距離」

除了「顏色」，還可以設定另一個屬性：「距離」

• rgba(232, 12, 122, 0.5) 這個顏色沒有設定「距離」，就會從「距離 = 0」的地方開始
• transparent 70% 這裡設定了「70%」，就會從「距離 = 70%」開始變透明

.bg-2{
	background-image: linear-gradient(to bottom, rgba(232, 12, 122, 0.5), transparent 70%), 
		linear-gradient(to right, rgba(232, 12, 122, 0.5), transparent 70%)
}

• 如果將第一個顏色設定為green 40%

.bg-2{
	background-image: linear-gradient(to bottom, green 40%, transparent 70%), 
		linear-gradient(to right, rgba(232, 12, 122, 0.5), transparent 70%)
}

「多個圖樣」的效果

• 因為「漸層」是「圖片」，所以可以給它設定「尺寸background-size」
• 兩個漸層，分別給它設定尺寸，中間用「逗號」隔開

.bg-3{
	background-image: linear-gradient(to bottom, rgba(232, 12, 122, 0.5), transparent 70%), 
		linear-gradient(to right, rgba(232, 12, 122, 0.5), transparent 70%);
	background-size: 30px 30px, 50px 30px;
}

用「漸層」畫出「銳利的邊線」

「下一個顏色」直接跟「上一個顏色」做「距離的重疊」，就可以做出銳利的邊線效果

範例一（使用linear-gradient）

做出「銳利邊線」的原理，請看下圖說明

.bg-7{
	border: 4px solid #000;
	background-image: linear-gradient(lightblue 30%, transparent 30%)
}

---

範例二（使用radial-gradient）

.bg-4{
	background-image: radial-gradient(#fff 30%, transparent 30%, transparent 60%, #fff 60%);
	background-color: teal;
}

❗️
[第一段說明]

radial-gradient(#fff 30%, transparent 30%,

• #fff 30% --> 前「30%」都是「很均勻的白色，沒有漸層」
• 「白色」從「30% 的位置」要「開始漸層」時，立刻轉為「透明」（transparent 30% --> transparent從 30% 的位置開始）
• 利用以上的原理，就會把「漸層效果」給完全遮蓋住，製造出「銳利的邊線」

❗️
[第二段說明]

transparent 60%, #fff 60%);

• transparent 60% --> 從 30%~60% 一直維持著「均勻的透明」（才能露出background-color: teal;），transparent從 60% 要「開始漸層」時，立刻轉「白色」（#fff 60% --> #fff 從 60% 的位置開始）

重複圖樣效果

利用上面「銳利邊線」的概念：用一段一段的顏色，畫出「接近銳利」的邊線，一圈一圈的畫出來，製作出下面的圖樣效果

.bg-5{
	background-image: radial-gradient(#ffffff 3px, transparent 5px, #ffffff 7px, transparent 9px, #ffffff 11px, transparent 13px, #ffffff 15px, transparent 17px, #ffffff 19px, transparent 21px, #ffffff 23px, transparent 25px, #ffffff 27px, transparent 29px, #ffffff 31px, transparent 33px);
	background-color: teal;
	background-size: 30px 30px;	
}

旋轉效果（轉盤）

• 「漸層」雖然不能做到「淡入淡出」的效果，但是可以做出類似「旋轉」的效果

只需要用到一個div，就可以做出轉盤了

• 利用「很多塊色彩，畫出銳利的邊線」來組出來的，有設定了「角度、顏色、size 等等」

• 一個圓 = 360度，切成 8 塊 --> 360/8 = 一塊45度

css:

.bg-6{
	background-image: 
		linear-gradient(45deg, tomato 50%, transparent 50%), 
		linear-gradient(90deg, orange 100%, transparent 100%), 
		linear-gradient(135deg, yellow 50%, transparent 50%), 
		linear-gradient(180deg, green 100%, transparent 100%), 
		linear-gradient(225deg, lightblue 50%, transparent 50%), 
		linear-gradient(270deg, teal 100%, transparent 100%), 
		linear-gradient(315deg, purple 50%, transparent 50%), 
		linear-gradient(360deg, pink 100%, transparent 100%);
		
	
	background-position: 0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%;
	
	border: 10px solid #000;
	background-repeat: no-repeat;
	
// 	切割成扇形
	background-size: 50% 50%;
// 	外框變成圓形的
	border-radius: 50%;
	
// 	旋轉的漸變效果
	transition: all, 3s;
// 	hover 時的旋轉效果
	&:hover{
		transform: rotate(3600deg)
	}
}

設定「角度」

如果想要更細膩的調整「漸層的方向」，就可以使用「角度」來取代「方向關鍵字」（方向關鍵字 例如：to bottom, to top, to right, to left, to bottom right 等等）

Syntax

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

這裡的「角度」是指：「水平線」與「漸層方向」之間的角度

範例一（沒有設定角度）

css:

.bg-7{
	border: 4px solid #000;
// 	沒有設定「角度」
	background-image: linear-gradient(lightblue 50%, orange 50%)
}

沒有設定角度，漸層就會按照「預設的方向」由上到下

---

範例二（設定 45 度）

css:

.bg-7{
	border: 4px solid #000;
// 	設定「45deg」
	background-image: linear-gradient(45deg, lightblue 50%, orange 50%)
}

設定 45deg，「水平線」與「漸層方向」之間的角度 = 45 deg

---

範例三

css:

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

範例網址：
https://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_angles

書中範例一

http://dabblet.com/gist/4b4ad05f4c1b5259066f

• 只有使用「線性漸層」，每個線性漸層都只有小小一塊

以往在做這種條紋背景，都要用到圖片。但如果用此範例的方式，用漸層來做的話，就不需要另外匯入圖片了。

書中範例二

http://dabblet.com/gist/e3cfcb094e65d85df847

• 也是使用「線性漸層」

範例：可縮放的背景圖

https://codepen.io/Wcc723/pen/BEbejQ

• 一個背景圖片，中間被裁掉一塊

只需要用到一個div，就可以做出來

here!!