Thuộc tính CSS background-color
đặt màu nền của một phần tử.
Nguồn cho ví dụ tương tác này được lưu trữ trong kho lưu trữ GitHub. Nếu bạn muốn đóng góp vào dự án ví dụ tương tác, vui lòng sao chép https://github.com/mdn/interactive-examples và gửi cho chúng tôi một pull request.
Cú pháp
/* Giá trị từ khóa */
background-color: red;
background-color: indigo;
/* Giá trị Hex (Thập lục phân) */
background-color: #bbff00; /* Hoàn toàn mờ đục */
background-color: #bf0; /* Fully opaque shorthand */
background-color: #11ffee00; /* Hoàn toàn trong suốt */
background-color: #1fe0; /* Fully transparent shorthand */
background-color: #11ffeeff; /* Hoàn toàn mờ đục */
background-color: #1fef; /* Fully opaque shorthand */
/* Giá trị RGB */
background-color: rgb(255, 255, 128); /* Hoàn toàn mờ đục */
background-color: rgba(117, 190, 218, 0.5); /* Trong suốt 50% */
/* Giá trị HSL */
background-color: hsl(50, 33%, 25%); /* Hoàn toàn mờ đục */
background-color: hsla(50, 33%, 25%, 0.75); /* Trong suốt 75% */
/* Giá trị từ khóa đặc biệt */
background-color: currentcolor;
background-color: transparent;
/* Giá trị chung */
background-color: inherit;
background-color: initial;
background-color: unset;
Thuộc tính background-color
được chỉ định là một giá trị <color>
.
Giá trị
<color>
- Màu đồng nhất của nền. Nó được hiển thị đằng sau bất kỳ
background-image
được chỉ định, mặc dù màu sẽ vẫn hiển thị qua bất kỳ độ trong suốt nào của hình ảnh.
Mối quan tâm về khả năng tiếp cận
Điều quan trọng là phải đảm bảo rằng tỷ lệ tương phản giữa màu nền và màu của văn bản được đặt trên nó đủ cao để những người gặp tình trạng thị lực kém có thể đọc được nội dung của trang.
Tỷ lệ tương phản màu được xác định bằng cách so sánh độ chói của văn bản và giá trị màu nền. Để xem Web Content Accessibility Guidelines (WCAG) hiện tại, tỷ lệ 4,5:1 là bắt buộc đối với nội dung văn bản và 3:1 đối với văn bản to, chẳng hạn như tiêu đề. Văn bản to được định nghĩa là 18,66px và đậm hoặc lớn hơn, hoặc 24px hoặc lớn hơ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
<color>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Ví dụ
HTML
<div class="exampleone">
Lorem ipsum dolor sit amet, consectetuer
</div>
<div class="exampletwo">
Lorem ipsum dolor sit amet, consectetuer
</div>
<div class="examplethree">
Lorem ipsum dolor sit amet, consectetuer
</div>
CSS
.exampleone {
background-color: teal;
color: white;
}
.exampletwo {
background-color: rgb(153,102,153);
color: rgb(255,255,204);
}
.examplethree {
background-color: #777799;
color: #FFFFFF;
}
Kết quả
Thông số kỹ thuật
Thông số kỹ thuật | Ghi chú | Phản hồi |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'background-color' in that specification. |
Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true <color> |
Backgrounds Level 3 GitHub issues |
CSS Level 2 (Revision 1) The definition of 'background-color' in that specification. |
||
CSS Level 1 The definition of 'background-color' in that specification. |
Initial definition |
Tính tương thích của trình duyệt web
BCD tables only load in the browser
Bảng tương thích trong trang này được tạo từ dữ liệu có cấu trúc. Nếu bạn muốn đóng góp vào dữ liệu, vui lòng xem https://github.com/mdn/browser-compat-data và gửi cho chúng tôi một pull request.
Xem thêm
- Multiple backgrounds
- Kiểu dữ liệu của
<color>
- Các thuộc tính khác liên quan đến màu sắc:
color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
, andcolumn-rule-color
- Applying color to HTML elements using CSS