background-color
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính background-color trong CSS dùng để đặt màu nền cho một phần tử.
Try it
background-color: brown;
background-color: #74992e;
background-color: rgb(255 255 128);
background-color: rgb(255 255 128 / 0.5);
background-color: hsl(50 33% 25%);
background-color: hsl(50 33% 25% / 0.75);
<section id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#example-element {
min-width: 100%;
min-height: 100%;
padding: 10%;
}
Cú pháp
/* Giá trị từ khóa */
background-color: red;
background-color: indigo;
/* Giá trị thập lục phân */
background-color: #bbff00; /* Hoàn toàn không trong suốt */
background-color: #bf0; /* Viết tắt hoàn toàn không trong suốt */
background-color: #11ffee00; /* Hoàn toàn trong suốt */
background-color: #1fe0; /* Viết tắt hoàn toàn trong suốt */
background-color: #11ffeeff; /* Hoàn toàn không trong suốt */
background-color: #1fef; /* Viết tắt hoàn toàn không trong suốt */
/* Giá trị RGB */
background-color: rgb(255 255 128); /* Hoàn toàn không trong suốt */
background-color: rgb(117 190 218 / 50%); /* Trong suốt 50% */
/* Giá trị HSL */
background-color: hsl(50 33% 25%); /* Hoàn toàn không trong suốt */
background-color: hsl(50 33% 25% / 75%); /* Độ mờ 75%, tức trong suốt 25% */
/* Giá trị từ khóa đặc biệt */
background-color: currentColor;
background-color: transparent;
/* Giá trị toàn cục */
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: revert-layer;
background-color: unset;
Thuộc tính background-color được chỉ định bằng một giá trị <color> duy nhất.
Giá trị
<color>-
Màu đồng nhất của nền. Màu này được hiển thị phía sau bất kỳ
background-imagenào được chỉ định, mặc dù màu sắc vẫn có thể nhìn thấy qua các phần trong suốt của hình ảnh.
Khả năng tiếp cận
Điều quan trọng là phải đảm bảo tỷ lệ tương phản giữa màu nền và màu của văn bản đặt lên trên đó đủ cao để người dùng có thị lực kém vẫn có thể đọc được nội dung của trang.
Tỷ lệ tương phản màu sắc được xác định bằng cách so sánh độ sáng của các giá trị màu chữ và màu nền. Để đáp ứng Hướng dẫn Khả năng tiếp cận Nội dung Web (WCAG) hiện tại, tỷ lệ 4.5:1 được yêu cầu đối với nội dung văn bản và 3:1 đối với văn bản lớn hơn như tiêu đề. Văn bản lớn được định nghĩa là 18.66px và đậm trở lên, hoặc 24px trở lên.
Định nghĩa hình thức
| Initial value | transparent |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | no |
| Computed value | computed color |
| Animation type | a color |
Cú pháp hình thức
background-color =
<color>
Ví dụ
Tô màu các hộp
Ví dụ này minh họa việc áp dụng background-color cho các phần tử HTML <div> sử dụng các giá trị CSS <color> khác nhau.
HTML
<div class="example-one">Lorem ipsum dolor sit amet, consectetuer</div>
<div class="example-two">Lorem ipsum dolor sit amet, consectetuer</div>
<div class="example-three">Lorem ipsum dolor sit amet, consectetuer</div>
CSS
.example-one {
background-color: transparent;
}
.example-two {
background-color: rgb(153 102 153);
color: rgb(255 255 204);
}
.example-three {
background-color: #777799;
color: white;
}
Kết quả
Tô màu bảng
Ví dụ này minh họa việc sử dụng background-color trên các phần tử HTML <table>, bao gồm các hàng <tr> và các ô <td>.
HTML
<table>
<tbody>
<tr id="r1">
<td id="c11">11</td>
<td id="c12">12</td>
<td id="c13">13</td>
</tr>
<tr id="r2">
<td id="c21">21</td>
<td id="c22">22</td>
<td id="c23">23</td>
</tr>
<tr id="r3">
<td id="c31">31</td>
<td id="c32">32</td>
<td id="c33">33</td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: collapse;
border: solid black 1px;
width: 250px;
height: 150px;
}
td {
border: solid 1px black;
}
#r1 {
background-color: lightblue;
}
#c12 {
background-color: cyan;
}
#r2 {
background-color: grey;
}
#r3 {
background-color: olive;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-color |
Tương thích trình duyệt
Xem thêm
- Multiple backgrounds
- Kiểu dữ liệu
<color> - Các thuộc tính liên quan đến màu sắc khác:
color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color, vàcolumn-rule-color