background-color

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.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0

Định nghĩa hình thức

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

Tính tương thích của trình duyệt web

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, and column-rule-color
• Applying color to HTML elements using CSS