Hướng dẫn rgba color css - css màu rgba


Giá trị màu RGB đại diện cho các nguồn ánh sáng đỏ, xanh lá cây và xanh dương.


Giá trị RGB

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

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

Mỗi tham số (đỏ, xanh lá cây và xanh dương) xác định cường độ của màu trong khoảng từ 0 đến 255.

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:

  • Group Facebook
  • Fanpage
  • Youtube
  • Instagram
  • Twitter
  • Linkedin
  • Pinterest
  • Trang chủ

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!