ฟังก์ชัน linear-gradient() ของ CSS

การระบุและวิธีใช้

CSS linear-gradient() ฟังก์ชันที่ใช้สร้างเรียบเรียงสีแบบแบนด์ลินิเออร์ที่เป็นภาพสูตรแบบเบื้องหลัง

เพื่อสร้างเรียบเรียงสีแบบแบนด์ลินิเออร์ คุณจำเป็นต้องกำหนดตัวชี้แนวที่ไม่ต่ำที่สุดสองตัว ตัวชี้แนวคือสีที่คุณต้องการให้เกิดการเปลี่ยนแปลงสีที่ละลายเข้ากันโดยสะดวก คุณยังสามารถกำหนดจุดเริ่มต้นและทิศทาง (หรือมุมอัญญาก์) และประเภทที่คุณต้องการให้เกิดเรียบเรียงสีนี้

ตัวอย่างตัวอย่างสำหรับเรียบเรียงสีแบบแบนด์ลินิเออร์：

ตัวอย่าง

ตัวอย่าง 1

เรียบเรียงสีแบบแบนด์ลินิเออร์ที่เริ่มจากด้านบน มันได้ข้ามสีจากแดงไปยังสีเหลือง และไปยังสีฟ้าคล้ง：

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

ทดลองด้วยตัวเอง

ตัวอย่าง 2

เรียบเรียงสีแบบแบนด์ลินิเออร์ที่เริ่มจากด้านซ้าย มันได้ข้ามสีจากแดงไปยังสีฟ้าคล้ง：

#grad {
  background-image: linear-gradient(to right, red , blue);
}

ทดลองด้วยตัวเอง

ตัวอย่าง 3

เรียบเรียงสีแบบแบนด์ลินิเออร์ที่เริ่มจากบนขวางด้วย (และขยายไปทางด้านล่างขวางด้วย)：

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

ทดลองด้วยตัวเอง

ตัวอย่าง 4

เรียบเรียงสีแบบแบนด์ลินิเออร์ที่กำหนดแนวและมุมอัญญาก์：

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

ทดลองด้วยตัวเอง

ตัวอย่าง 5

เรียบเรียงสีแบบแบนด์ลินิเออร์ที่มีสีเครื่องหมายหลายตัว：

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

ทดลองด้วยตัวเอง

ตัวอย่าง 6

การกระจายสีที่มีสีสายที่อยู่ที่สองตำแหน่ง:

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

ทดลองด้วยตัวเอง

ตัวอย่าง 7

การกระจายสีที่มีความโปร่งใส:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

ทดลองด้วยตัวเอง

สัญลักษณ์ CSS

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

รายละเอียดเทคนิค

การรองรับโดยเบราเซอร์

ตัวเลขในตารางนี้เป็นสมุดชาติที่เปิดใช้งานฟังก์ชันนี้เต็ม 100%

หน้าที่เกี่ยวข้อง

ตัวอย่างการศึกษา：การกระจายสีของ CSS

อ้างอิง：คุณสมบัติ background-image CSS

อ้างอิง：ฟังก์ชัน conic-gradient() ของ CSS

อ้างอิง：ฟังก์ชัน radial-gradient() ของ CSS

อ้างอิง：ฟังก์ชัน repeating-conic-gradient() ของ CSS

อ้างอิง：ฟังก์ชัน repeating-linear-gradient() ของ CSS

อ้างอิง：CSS repeating-radial-gradient() ฟังก์ชัน