CSS3 - Màu sắc

CSS3 có các thuộc tính màu bổ sung được hỗ trợ như sau:

Màu RGBA
Màu HSL
Màu HSLA
Opacity

RGBA viết tắt của Red Green Blue AlphaĐây là phần mở rộng của CSS2, Alpha chỉ định độ mờ của màu và số tham số là một số trong khoảng từ 0,0 đến 1,0. Cú pháp mẫu của RGBA như hình dưới đây -

#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 viết tắt của hue, saturation, lightness. Here Huge là một mức độ trên bánh xe màu, độ bão hòa và độ sáng là các giá trị phần trăm từ 0 đến 100%. Cú pháp mẫu của HSL như hình dưới đây -

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

HSLA viết tắt của hue, saturation, lightness and alpha. Giá trị alpha chỉ định độ mờ như được hiển thị RGBA. Cú pháp mẫu của HSLA như hình dưới đây -

#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);}

opacitylà loại sơn mỏng hơn cần thêm màu đen để tăng độ mờ. Cú pháp mẫu của độ mờ như được hiển thị bên dưới:

#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;}

Ví dụ sau đây cho thấy thuộc tính màu 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>

Nó sẽ tạo ra kết quả sau:

Ví dụ sau đây cho thấy thuộc tính màu 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>

Nó sẽ tạo ra kết quả sau:

Ví dụ sau đây cho thấy thuộc tính màu 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>

Nó sẽ tạo ra kết quả sau:

Ví dụ sau đây cho thấy thuộc tính 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>

Nó sẽ tạo ra kết quả sau: