Thuộc tính background-color trong CSS áp dụng các màu đồng nhất làm nền trên một phần tử. Đây là một ví dụ:
html ( background-color: #82a43a; )Ví dụ được sử dụng ở trên ( #82a43a) được gọi là mã hex, và đó là một trong nhiều cách mà CSS phải thể hiện một màu duy nhất. Có một số cách để tìm đúng mã hex. Bất kỳ ai đã sử dụng công cụ thiết kế đều thấy một bộ chọn màu tương tự như bộ này:
Mã hex là một cách để khai báo màu trong CSS. Ngoài ra còn có một loạt các tên mà bạn có thể sử dụng, ví dụ:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Những màu này không linh hoạt lắm, nhưng chúng có thể hữu ích trong một khoảng thời gian ngắn. Chúng dễ nhớ hơn mã hex và có rất nhiều mã.
Một cách khác để khai báo màu là sử dụng RGB, RGBa, HSL hoặc HSLa:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )Không giống như mã hex, các giá trị này cho phép độ trong suốt (alpha), có thể siêu hữu ích. Tìm hiểu thêm về RGBa hoặc HSLa.
Bản giới thiệu
Xem màu nền của Bút theo CSS-Tricks (@ css-trick) trên CodePen.
Có liên quan
- nền-tệp đính kèm
- nền-clip
- hình nền
- nền-nguồn gốc
- nền-vị trí
- Bối cảnh Lặp lại
- kích thước nền
Nhiêu tai nguyên hơn
- Thông số CSS3
- MDN
Hỗ trợ trình duyệt
Mã hex và hầu hết các tên màu hoạt động ở mọi nơi. RGBa và HSLa có bộ hỗ trợ trình duyệt riêng: RGBa và HSLa.
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Làm | Làm | Làm | Làm | Làm | Làm | Làm |