background-color

Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh

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

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
background-colorChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4
Notes
Full support 4
Notes
Notes In Internet Explorer 8 and 9, there is a bug where a computed background-color of transparent causes click events to not get fired on overlaid elements.
Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

Xem thêm