ฟังก์ชันCSS linear-gradient()
ตัวอย่าง
การไล่ระดับสีเชิงเส้นนี้เริ่มต้นที่ด้านบน มันเริ่มเป็นสีแดง เปลี่ยนเป็นสีเหลือง แล้วก็เป็นสีน้ำเงิน:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
ฟังก์ชัน linear-gradient() ตั้งค่าการไล่ระดับสีเชิงเส้นเป็นภาพพื้นหลัง
ในการสร้างการไล่ระดับสีเชิงเส้น คุณต้องกำหนดจุดหยุดสีอย่างน้อยสองจุด สต็อปสีคือสีที่คุณต้องการทำให้การเปลี่ยนสีเป็นไปอย่างราบรื่น คุณยังสามารถกำหนดจุดเริ่มต้นและทิศทาง (หรือมุม) พร้อมกับเอฟเฟกต์การไล่ระดับสี
ตัวอย่างของการไล่ระดับเชิงเส้น:
รุ่น: | CSS3 |
---|
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับฟังก์ชันนี้อย่างเต็มที่
ตัวเลขตามด้วย -webkit-, -moz- หรือ -o- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Function | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
ไวยากรณ์ CSS
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
การไล่ระดับสีเชิงเส้นที่เริ่มจากด้านซ้าย มันเริ่มเป็นสีแดง เปลี่ยนเป็นสีน้ำเงิน:
#grad {
background-image: linear-gradient(to right, red , blue);
}
ตัวอย่าง
การไล่ระดับสีเชิงเส้นที่เริ่มต้นที่ด้านซ้ายบน (และไปที่ด้านล่างขวา):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
ตัวอย่าง
การไล่ระดับสีเชิงเส้นที่มีมุมที่กำหนด:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
ตัวอย่าง
การไล่ระดับสีเชิงเส้นที่มีการหยุดหลายสี:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
ตัวอย่าง
การไล่ระดับสีเชิงเส้นที่มีความโปร่งใส:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS การไล่ระดับสี