background-color

Thuộc tính CSS background-color đặt màu nền của một phần tử.

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 valuetransparent
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Computed valuecomputed color
Animation typea 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

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

BCD tables only load in the browser

Xem thêm