CSS3 - สี

CSS3 ได้รองรับคุณสมบัติสีเพิ่มเติมดังนี้ -

RGBA สี
สี HSL
HSLA สี
Opacity

RGBA หมายถึง Red Green Blue Alphaเป็นส่วนขยายของ CSS2 Alpha ระบุความทึบของสีและหมายเลขพารามิเตอร์เป็นตัวเลขระหว่าง 0.0 ถึง 1.0 ไวยากรณ์ตัวอย่างของ RGBA ดังแสดงด้านล่าง -

#d1 {background-color: rgba(255, 0, 0, 0.5);} 
#d2 {background-color: rgba(0, 255, 0, 0.5);}  
#d3 {background-color: rgba(0, 0, 255, 0.5);}

HSL หมายถึง hue, saturation, lightnessที่นี่ Huge คือระดับของวงล้อสีความอิ่มตัวและความสว่างคือค่าเปอร์เซ็นต์ระหว่าง 0 ถึง 100% ไวยากรณ์ตัวอย่างของ HSL ดังแสดงด้านล่าง -

#g1 {background-color: hsl(120, 100%, 50%);}  
#g2 {background-color: hsl(120, 100%, 75%);}  
#g3 {background-color: hsl(120, 100%, 25%);}

HSLA หมายถึง hue, saturation, lightness and alpha. ค่าอัลฟาระบุความทึบดังที่แสดง RGBA ไวยากรณ์ตัวอย่างของ HSLA ดังแสดงด้านล่าง -

#g1 {background-color: hsla(120, 100%, 50%, 0.3);}  
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}  
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}

opacityสีทินเนอร์จำเป็นต้องเพิ่มสีดำเพื่อเพิ่มความทึบ ตัวอย่างไวยากรณ์ของความทึบดังแสดงด้านล่าง -

#g1 {background-color:rgb(255,0,0);opacity:0.6;}  
#g2 {background-color:rgb(0,255,0);opacity:0.6;}  
#g3 {background-color:rgb(0,0,255);opacity:0.6;}

ตัวอย่างต่อไปนี้แสดงคุณสมบัติสี rgba

<html>
   <head>
      <style>
         #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);}
      </style>
   </head>

   <body>
      <p>RGBA colors:</p>
      <p id = "p1">Red</p>
      <p id = "p2">Green</p>
      <p id = "p3">Blue</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่างต่อไปนี้แสดงคุณสมบัติสี HSL

<html>
   <head>
      <style>
         #g1 {background-color:hsl(120, 100%, 50%);}
         #g2 {background-color:hsl(120,100%,75%);}
         #g3 {background-color:hsl(120,100%,25%);}
      </style>
   </head>

   <body>
      <p>HSL colors:</p>
      <p id = "g1">Green</p>
      <p id = "g2">Normal Green</p>
      <p id = "g3">Dark Green</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่างต่อไปนี้แสดงคุณสมบัติสี HSLA

<html>
   <head>
      <style>
         #d1 {background-color:hsla(120,100%,50%,0.3);}
         #d2 {background-color:hsla(120,100%,75%,0.3);}
         #d3 {background-color:hsla(120,100%,25%,0.3);}
      </style>
   </head>

   <body>
      <p>HSLA colors:</p>
      <p id = "d1">Less opacity green</p>
      <p id = "d2">Green</p>
      <p id = "d3">Green</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่างต่อไปนี้แสดงคุณสมบัติ Opacity

<html>
   <head>
      <style>
         #m1 {background-color:rgb(255,0,0);opacity:0.6;} 
         #m2 {background-color:rgb(0,255,0);opacity:0.6;} 
         #m3 {background-color:rgb(0,0,255);opacity:0.6;}
      </style>
   </head>

   <body>
      <p>HSLA colors:</p>
      <p id = "m1">Red</p>
      <p id = "m2">Green</p>
      <p id = "m3">Blue</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -