Màu trong CSS3

CSS3 hỗ trợ thêm các thuộc tính color như sau:

RGBA color
HSL color
HSLA color
Opacity

RGBA là viết tắt của Red Green Blue Alpha. Đây là một sự kế thừa từ CSS2, Alpha xác định độ trong suốt của một màu và số tham số là một số từ 0.0 đến 1.0. Một cú pháp mẫu của RGBA như sau:

#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 là viết tắt cho Huge, Saturation, Lightness. Ở đây, Huge là độ màu, Saturation, Lightness là các giá trị % từ 0 tới 100%. Một cú pháp mẫu của HSL như sau:

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

HSLA là viết tắt cho Huge, Saturation, Lightness và Alpha. Giá trị Alpha giống như trong RGBA. Một cú pháp mẫu của HSLA như sau:

#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 là một thuốc màu loãng cần được thêm vào để tăng độ trong suốt. Cú pháp mẫu của Opacity là:

#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ụ dưới đây minh họa cách sử dụng của thuộc tính rgb để xác định màu trong CSS:

<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>Gia tri mau RGBA tren tuong ung:</p>
      <p id="p1">Red</p>
      <p id="p2">Green</p>
      <p id="p3">Blue</p>
   </body>
</html>

Kết quả là:

Gia tri mau RGBA tren tuong ung:

Red

Green

Ví dụ dưới đây minh họa cách sử dụng của thuộc tính HSL để xác định màu trong CSS:

<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>Gia tri mau HSL tren tuong ung:</p>
      <p id="g1">Green</p>
      <p id="g2">Normal Green</p>
      <p id="g3">Dark Green</p>
   </body>
</html>

Kết quả là:

Ví dụ dưới đây minh họa cách sử dụng của thuộc tính HSLA để xác định màu trong CSS:

<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>Gia tri mau HSLA tren tuong ung:</p>
      <p id="d1">Less opacity green</p>
      <p id="d2">Green</p>
      <p id="d3">Green</p>
   </body>
</html>

Kết quả là:

Ví dụ dưới đây minh họa cách sử dụng của thuộc tính opacity để xác định màu trong CSS:

<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>

Kết quả là:

HSLA colors:

Red

Green

Blue

Màu trong CSS3

Duy Năm

Bình luận

Mục lục bài viết

Học CSS