CSS สี

การสนับสนุนของ CSS 140 ชื่อสีต่าง ๆและมีรูปแบบที่เป็นระดับที่สูงขึ้น เช่น ค่าหกสิบทศน์ ค่า RGB ค่า RGBA ค่า HSL ค่า HSLA และความโปร่งใส。

สี RGBA

สี RGBA คือการขยายสี RGB ด้วยช่อง alpha - ช่องนี้กำหนดความโปร่งใสของสี。

สี RGBA ถูกกำหนดด้วยรูปแบบ: rgba(red, green, blue, alpha)。 alpha ตัวเลขที่ใช้เป็นตัวแปรคือตัวเลขที่อยู่ระหว่าง 0.0 (สมบูรณ์โปร่งใส) และ 1.0 (สมบูรณ์ไม่โปร่งใส).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

ตัวอย่างด้านล่างนี้กำหนดสี RGBA ต่าง ๆ:

ตัวอย่าง

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* สีแดงที่มีความโปร่งใส */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* สีเขียวที่มีความโปร่งใส */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* สีน้ำเงินที่มีความโปร่งใส */

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

สี HSL

HSL หมายถึงความเข้มของสี ความชัดเจน และความเข้มของแสง (Hue, Saturation และ Lightness).

ค่าสี HSL ถูกกำหนดด้วยรูปแบบ: hsl(hue, saturation, lightness).

ความเข้มของสีคืออัตราส่วนของสีเครื่องกำเนิดสี (จาก 0 ถึง 360):

  • 0 (หรือ 360) คือสีสีแดง
  • 120 คือสีสีเขียว
  • 240 คือสีสีน้ำเงิน

ความชัดเจนเป็นอัตราส่วนเปอร์เซ็นต์: 100% คือสีทั้งหมด。

ความเข้มของแสงเป็นอัตราส่วนเปอร์เซ็นต์: 0% คือสีเข้ม (ดำ) และ 100% คือสีขาว。

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

ตัวอย่างด้านล่างนี้กำหนดสี HSL ต่าง ๆ:

ตัวอย่าง

#p1 {background-color: hsl(120, 100%, 50%);}  /* สีเขียว */
#p2 {background-color: hsl(120, 100%, 75%);}  /* สีเขียวอ่อน */
#p3 {background-color: hsl(120, 100%, 25%);}  /* สีเขียวเข้ม */
#p4 {background-color: hsl(120, 60%, 70%);}   /* สีเขียวอ่อน */

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

ค่าสี HSLA

ค่าสี HSLA คือการขยายค่าสี HSL ที่มีช่องตามฟ้า - มันกำหนดความโปร่งใสของสี

ค่าสี HSLA นั้นกำหนดโดยตัวอักษรต่อไปนี้: hsla(hue, saturation, lightness, alpha)，ที่ alpha คือค่าที่กำหนดความโปร่งใส ซึ่งอยู่ระหว่าง 0.0 (โปร่งใสทั้งหมด) และ 1.0 (ไม่โปร่งใสอย่างเต็มที่)

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

ตัวอย่างด้านล่างนี้กำหนดสี HSLA ต่าง ๆ:

ตัวอย่าง

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* สีเขียวโดยมีความโปร่งใส */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* สีเขียวอ่อนโดยมีความโปร่งใส */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* สีเขียวเข้มโดยมีความโปร่งใส */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* สีเขียวอ่อนโดยมีความโปร่งใส */

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

ความโปร่งใส

CSS ความโปร่งใส การตั้งค่าค่าทรัพยากรนั้นกำหนดความโปร่งใสขององค์ประกอบทั้งหมด (สี背影และข้อความจะเป็นโปร่งใส/ไม่โปร่งใส)

ความโปร่งใส ค่าทรัพยากรต้องเป็นตัวเลขที่อยู่ระหว่าง 0.0 (โปร่งใสทั้งหมด) และ 1.0 (ไม่โปร่งใสอย่างเต็มที่)。

rgb(255, 0, 0); ความโปร่งใส:0.2;
rgb(255, 0, 0); ความโปร่งใส:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

โปรดทราบว่าข้อความด้านบนจะเป็นโปร่งใส/ไม่โปร่งใสด้วย

ตัวอย่างด้านล่างนี้แสดงให้เห็นสิ่งที่มีความโปร่งใส/ไม่โปร่งใสต่างๆ

ตัวอย่าง

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* สีแดงที่มีความโปร่งใส */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* สีเขียวที่มีความโปร่งใส */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* สีสky blue ที่มีความโปร่งใส */

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