Hàm rgba trong CSS

CSS Opacity được sử dụng để thiết lập độ mờ (opacity) cho một phần tử. Nó chấp nhận một giá trị số từ 0 đến 1. Một số trình duyệt cũng chấp nhận một giá trị phần trăm ( % ) tuy nhiên không phải tất cả.

CSS {opacity: 1} là độ mờ mặc định của một phần tử, giá trị này cho phép bạn nhìn thấy phần tử một cách rõ ràng nhất. CSS {opacity:0} sẽ làm cho phần tử trở thành trong suốt (transparent).

opacity: ;

/* Example: */

opacity: 1.0;
opacity: 0.5;
opacity: 0;

Độ mờ (Opacity) khi được áp dụng cho một phần tử nó sẽ có tác dụng với tất cả các nội dung của phần tử, bao gồm cả các phần tử con. Không có sự thừa kế về độ mờ, và bạn có thể thiết lập một giá trị CSS Opacity khác cho phần tử con, nhưng phần tử con vẫn bị ảnh hưởng bởi độ mờ của phần tử cha.

opacity-example.css

#parent  {
   border: 1px solid blue;
   padding: 5px;
   background:lightblue;
}
.child {
   display: inline-block;
   background: lightgreen;
   padding: 5px;
   margin: 10px;
   height: 50px;
   width: 150px;
}
.option {
   border: 1px solid #eee;
   padding: 5px;
   margin: 10px 0px;
}

opacity-example.html

    
    
    
    


    
CSS Opacity
    
Set Opacity for parent element:
    

         Opacity: 1 

         Opacity: 0.5 

         Opacity: 0
    
    

        I am a parent element 

        

            I am a child element. 

            {opacity: 1}
        
        

            I am a child element. 

            {opacity: 0.5}
        
        

        ...
    

Ví dụ, thay đổi độ mờ cho một ảnh (Image) khi con trỏ ở trên (over) ảnh.

opacity-hover-example.html

    
    
    


    
CSS Opacity
    
Move the cursor over Image
    

2- RGBA

Sử dụng hàm RGBA giúp bạn tạo ra một mầu bằng sự kết hợp của 4 giá trị Red, Green, Blue, Alpha. Trong đó Red, Green, Blue là các số nguyên (integer) nhận các giá trị từ 0-255. Alpha đại diện cho độ mờ (opacity), nó nhận giá trị từ 0-1.

rgba(76, 175, 80, 0.1)

rgba(76, 175, 80, 0.15)

rgba(76, 175, 80, 1)

Mầu được tạo ra bởi RGBA có độ mờ, bạn có thể sử dụng mầu này làm mầu nền (background color) cho một phần tử. Độ mờ này chỉ có tác dụng với nền (background) của phần tử, nó không ảnh hưởng tới nội dung của phần tử và các phần tử con.

Ví dụ: RGB (255, 0, 0) được hiển thị dưới dạng màu đỏ, vì màu đỏ được đặt thành giá trị cao nhất (255) và các loại khác được đặt thành 0.

Để hiển thị màu đen, đặt tất cả các tham số màu thành 0, như thế này: RGB (0, 0, 0).

Để hiển thị màu trắng, đặt tất cả các tham số màu thành 255, như thế này: RGB (255, 255, 255).

Thử nghiệm bằng cách trộn các giá trị RGB dưới đây:

Các sắc thái của màu xám thường được xác định bằng cách sử dụng các giá trị bằng nhau cho tất cả 3 nguồn ánh sáng:

Giá trị RGBA

Các giá trị màu RGBA là một phần mở rộng của các giá trị màu RGB với kênh alpha - chỉ định độ mờ cho một màu.

Giá trị màu RGBA được chỉ định với:

RGBA (đỏ, xanh lá cây, xanh dương, alpha)

Tham số alpha là một số giữa 0,0 (hoàn toàn trong suốt) và 1.0 (hoàn toàn không trong suốt):

Thử nghiệm bằng cách trộn các giá trị RGBA dưới đây:

Cafedev chia sẻ về Giá trị màu RGB đại diện cho nguồn sáng ĐỎ(RED), XANH LÁ(GREEN) và LAM(BLUE).

Giá trị màu RGBA là phần mở rộng của RGB với kênh Alpha (độ mờ).

• 1. Giá trị màu RGB
• 2. Màu xám
• 3. Giá trị màu RGBA

1. Giá trị màu RGB

2. Màu xám

3. Giá trị màu RGBAred,green, blue)

Trong HTML, màu có thể được chỉ định làm giá trị RGB, sử dụng công thức này:

rgb(red,green, blue)

Mỗi tham số (đỏ, lục và lam) xác định cường độ của màu với giá trị từ 0 đến 255.

Điều này có nghĩa là có 256 x 256 x 256 = 16777216 màu có thể!

Ví dụ: rgb (255, 0, 0) được hiển thị màu đỏ, vì màu đỏ được đặt thành giá trị cao nhất (255) và hai màu còn lại (xanh lục và xanh lam) được đặt thành 0.

Một ví dụ khác, rgb (0, 255, 0) được hiển thị là màu xanh lá cây, bởi vì màu xanh lá cây được đặt thành giá trị cao nhất của nó (255) và hai cái còn lại (đỏ và xanh) được đặt thành 0.

Để hiển thị màu đen, đặt tất cả các tham số màu thành 0, như thế này: rgb (0, 0, 0).

Để hiển thị màu trắng, đặt tất cả các tham số màu thành 255, như thế này: rgb (255, 255, 255).

Thử nghiệm bằng ví dụ các giá trị RGB bên dưới:

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

Copy and chạy code

2. Màu xám

3. Giá trị màu RGBA

Trong HTML, màu có thể được chỉ định làm giá trị RGB, sử dụng công thức này:

rgb(red,green, blue)

Mỗi tham số (đỏ, lục và lam) xác định cường độ của màu với giá trị từ 0 đến 255.

Điều này có nghĩa là có 256 x 256 x 256 = 16777216 màu có thể!

Ví dụ: rgb (255, 0, 0) được hiển thị màu đỏ, vì màu đỏ được đặt thành giá trị cao nhất (255) và hai màu còn lại (xanh lục và xanh lam) được đặt thành 0.

Một ví dụ khác, rgb (0, 255, 0) được hiển thị là màu xanh lá cây, bởi vì màu xanh lá cây được đặt thành giá trị cao nhất của nó (255) và hai cái còn lại (đỏ và xanh) được đặt thành 0.

3. Giá trị màu RGBA

Trong HTML, màu có thể được chỉ định làm giá trị RGB, sử dụng công thức này:

Giá trị màu RGBA được chỉ định bằng công thức sau:

rgba(red, green, blue, alpha)

Tham số alpha là một số trong khoảng 0,0 (hoàn toàn trong suốt) và 1.0 (hoàn toàn minh bạch):

Thử nghiệm bằng cách trộn các màu giá trị RGBA ví dụ bên dưới:

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)

Copy and chạy code

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa: