Thuộc tính color trong CSS được sử dụng để đặt màu cho các phần tử HTML. Thông thường, thuộc tính này được sử dụng để đặt màu nền hoặc màu phông chữ của phần tử
Trong CSS, chúng tôi sử dụng các giá trị màu để chỉ định màu. Tương tự, chúng ta có thể sử dụng thuộc tính này cho màu viền và các hiệu ứng trang trí khác
Chúng ta có thể xác định màu của một phần tử bằng cách sử dụng các cách đi kèm
- định dạng RGB
- định dạng RGBA
- ký hiệu thập lục phân
- HSL
- HSLA
- màu tích hợp
Giá trị RGB
Trong CSS, một màu có thể được chỉ định làm giá trị RGB, sử dụng công thức này
rgb [đỏ, lục, lam]
Mỗi tham số [đỏ, lục và lam] xác định cường độ của màu ở đâu đó trong phạm vi từ 0 đến 255
Chẳng hạn, rgb[255, 0, 0] được hiển thị là màu đỏ, vì màu đỏ được đặt thành giá trị cao nhất [255] và các giá trị 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, tương tự 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, tương tự như thế này. rgb[255, 255, 255]
Thử nghiệm bằng cách trộn 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, 165, 0]
rgb[106, 90, 205]
In HTML, you can specify colors using RGB values.
rgb[255, 0, 0]
rgb[0, 0, 255]
rgb[60, 179, 113]
rgb[238, 130, 238]
rgb[255, 165, 0]
rgb[106, 90, 205]
Trong HTML, bạn có thể chỉ định màu bằng các giá trị RGB
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ị tương đương cho cả 3 nguồn sáng
Ví dụ
rgb[0, 0, 0]
rgb[60, 60, 60]
rgb[120, 120, 120]
rgb[180, 180, 180]
rgb[240, 240, 240]
rgb[255, 255, 255]
By using equal values for red, green, and blue, you will get different shades of gray.
rgb[0, 0, 0]rgb[60, 60, 60]
rgb[120, 120, 120]
rgb[180, 180, 180]
rgb[240, 240, 240]
rgb[255, 255, 255]
Bằng cách sử dụng các giá trị bằng nhau cho màu đỏ, xanh lục và xanh lam, bạn sẽ nhận được các sắc thái xám khác nhau
Giá trị RGBA
Giá trị màu RGBA là phần mở rộng của giá trị màu RGB với kênh alpha – chỉ định độ mờ cho màu
Giá trị màu RGBA được chỉ định với
rgba [đỏ, lục, lam, alpha]
Tham số alpha là một số trong khoảng từ 0. 0 [hoàn toàn trong suốt] và 1. 0 [không minh bạch chút nào]
Thử nghiệm bằng cách trộn các giá trị RGBA 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]
You can make transparent colors by using the RGBA color value.
rgb[255, 99, 71, 0]
rgb[255, 99, 71, 0. 2]
rgb[255, 99, 71, 0. 4]
rgb[255, 99, 71, 0. 6]
rgb[255, 99, 71, 0. số 8]
rgb[255, 99, 71, 1]
Bạn có thể tạo màu trong suốt bằng cách sử dụng giá trị màu RGBA
Cảm ơn vì đã đọc. Chúng tôi hy vọng bạn thấy hướng dẫn này hữu ích và chúng tôi rất muốn nghe phản hồi của bạn trong phần Nhận xét bên dưới. Và cho chúng tôi thấy những gì bạn đã học được bằng cách chia sẻ các dự án của bạn với chúng tôi
Có thể sử dụng hàm CSS rgba[]
để cung cấp giá trị màu có độ trong suốt alpha khi sử dụng CSS. Nó cho phép bạn chỉ định giá trị màu RGB, cũng như giá trị alpha để xác định độ trong suốt của màu
Hàm rgba[]
hoạt động giống như hàm rgb[]
[ở chỗ nó chấp nhận giá trị RGB làm tham số], ngoại trừ rgba[]
chấp nhận giá trị thứ tư — kênh alpha
Như thế này
Giá trị RGBA được cung cấp dưới dạng danh sách bốn giá trị được phân tách bằng dấu phẩy, đại diện cho các kênh màu đỏ, xanh lá cây, xanh lam và alpha tương ứng
Mỗi giá trị RGB có thể được cung cấp dưới dạng số nguyên hoặc theo tỷ lệ phần trăm. Giá trị số nguyên 255
tương ứng với giá trị phần trăm của 100%
Tuy nhiên, trên kênh alpha, giá trị phải nằm trong khoảng 0. 0 [hoàn toàn trong suốt] đến 1. 0 [đục hoàn toàn]
Giá trị phần trăm cho kênh alpha không được hỗ trợ trong đặc tả CSS hiện tại [Mô-đun màu CSS Cấp 3 tại thời điểm viết]. Tuy nhiên, tỷ lệ phần trăm được đề xuất trong Mô-đun màu CSS Cấp 4 [ở trạng thái dự thảo tại thời điểm viết bài này]
Ví dụ trang web
Đây là một ví dụ hoạt động về cách sử dụng hàm rgba[]
để xác định màu cho trang web
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Xem trước trình chỉnh sửa
Bạn có thể thấy rằng phần tử
0 trong suốt một phần [giá trị alpha của nó làrgb[0, 0, 0]
rgb[60, 60, 60]
rgb[120, 120, 120]
rgb[180, 180, 180]
rgb[240, 240, 240]
rgb[255, 255, 255]
By using equal values for red, green, and blue, you will get different shades of gray.
1]rgb[0, 0, 0]
rgb[60, 60, 60]
rgb[120, 120, 120]
rgb[180, 180, 180]
rgb[240, 240, 240]
rgb[255, 255, 255]
By using equal values for red, green, and blue, you will get different shades of gray.
Tinh chỉnh các giá trị alpha ở trên để xem ảnh hưởng của nó đối với độ trong suốt của từng phần tử
Ví dụ về biến thể Alpha
Đây là một ví dụ về cùng một màu được lặp lại nhiều lần [trên một hình nền], nhưng mỗi màu có một giá trị alpha khác nhau
Tất cả các giá trị khác đều giống nhau [i. e. đỏ, lục, lam giống nhau trên tất cả các hàng], chỉ có kênh alpha thay đổi
Điều này chứng tỏ rằng hình nền sẽ ít nhìn thấy hơn khi giá trị alpha tăng lên [các ngôi sao là hình nền]