background

Try it

background: green;

background: content-box radial-gradient(crimson, skyblue);

background: no-repeat url("/shared-assets/images/examples/lizard.png");

background: left 5% / 15% 60% repeat-x
  url("/shared-assets/images/examples/star.png");

background:
  center / contain no-repeat
    url("/shared-assets/images/examples/firefox-logo.svg"),
  #eeeeee 35% url("/shared-assets/images/examples/lizard.png");

<section id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

Thuộc tính thành phần

Thuộc tính này là viết tắt của các thuộc tính CSS sau:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

Cú pháp

/* Sử dụng <background-color> */
background: green;

/* Sử dụng <bg-image> và <repeat-style> */
background: url("test.jpg") repeat-y;

/* Sử dụng <visual-box> và <'background-color'> */
background: border-box red;

/* Hình ảnh đơn, căn giữa và co giãn */
background: no-repeat center/80% url("../img/image.png");

/* Giá trị toàn cục */
background: inherit;
background: initial;
background: revert;
background: revert-layer;
background: unset;

Giá trị

<attachment>

Xem background-attachment. Mặc định: scroll.

<visual-box>

Xem background-clip và background-origin. Mặc định: lần lượt là border-box và padding-box.

<'background-color'>

Xem background-color. Mặc định: transparent.

<bg-image>

Xem background-image. Mặc định: none.

<bg-position>

Xem background-position. Mặc định: 0% 0%.

<repeat-style>

Xem background-repeat. Mặc định: repeat.

<bg-size>

Xem background-size. Mặc định: auto.

Mô tả

Thuộc tính viết tắt background cho phép bạn khai báo tất cả các thuộc tính nền CSS trong một khai báo duy nhất. Nền nằm bên dưới nội dung của phần tử. Khi bạn có nhiều giá trị nền phân tách bằng dấu phẩy, mỗi giá trị là một lớp nền được vẽ lên trên các lớp trước đó.

Thuộc tính background được chỉ định là một hoặc nhiều lớp nền, phân tách bằng dấu phẩy. Mỗi lớp có thể bao gồm không, một hoặc hai thành phần <visual-box> và không hoặc một <attachment>, <bg-image>, <bg-position>, <bg-size> và <repeat-style>. Nếu hai thành phần <bg-position>, <bg-size> hoặc <repeat-style> được chỉ định, giá trị đầu tiên là giá trị ngang và giá trị thứ hai là giá trị dọc. Nếu chỉ có một giá trị được đặt, giá trị đó được áp dụng cho cả hai chiều.

Thành phần <'background-color'> chỉ có thể được đưa vào lớp nền cuối cùng được chỉ định.

Các thuộc tính thành phần không được thiết lập trong khai báo giá trị thuộc tính viết tắt background được thiết lập về giá trị mặc định của chúng.

Thứ tự thuộc tính thành phần

Vì một số thuộc tính thành phần có chung loại giá trị, thứ tự của các thuộc tính thành phần đó trong viết tắt là quan trọng.

Giá trị <bg-size> chỉ có thể được bao gồm ngay sau <bg-position>, phân tách với ký tự /. Ví dụ: 10px 10px / 80% 80% có nghĩa là hình ảnh nền cao và rộng bằng 80% so với phần tử, và sẽ được đặt 10px từ trên cùng và 10px từ bên trái của góc trên trái của phần tử. Trong <bg-position>, nếu cả hai giá trị đều là độ dài, hoặc một là độ dài và giá trị kia là center, giá trị đầu tiên tham chiếu đến vị trí ngang và giá trị thứ hai tham chiếu đến vị trí dọc.

Mỗi lớp nền có thể bao gồm không, một hoặc hai giá trị <visual-box>. Nếu chỉ có một giá trị được bao gồm, nó thiết lập cả background-origin và background-clip. Nếu có hai giá trị, giá trị đầu chỉ định background-origin và giá trị thứ hai chỉ định giá trị background-clip. Nếu không có giá trị <visual-box> nào, background-origin mặc định là border-box và background-clip mặc định là padding-box.

Mặc dù không có yêu cầu thứ tự cho các thuộc tính nền khác, thứ tự sau được khuyến nghị để nhất quán và dễ đọc; hãy nhớ rằng không có giá trị nào là bắt buộc:

<bg-image> <bg-position> / <bg-size> <repeat-style> <attachment> <bg-clip> <bg-origin> <'background-color'>

Khai báo background sau đây đặt rõ ràng tất cả các giá trị mặc định theo thứ tự này:

background: none 0% 0% / auto auto repeat scroll border-box padding-box
  transparent;

Ba dòng CSS sau tương đương với trên, dù thứ tự khác:

background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;

Thứ tự vẽ hình ảnh

Nếu nhiều nền phân tách bằng dấu phẩy được bao gồm, chúng tạo ra nhiều lớp nền chồng lên nhau. Nền đầu tiên trong danh sách tạo lớp trên cùng. Nếu lớp trên cùng không chứa vùng trong suốt, đây là lớp duy nhất sẽ hiển thị.

Lớp cuối cùng là lớp dưới cùng. Màu nền luôn được bao gồm trong lớp này.

Nền body áp dụng cho toàn bộ tài liệu

Nếu giá trị background-image được tính toán của phần tử <html> :root là none và background-color là transparent, trình duyệt sẽ chuyển các kiểu background được đặt trên phần tử <body> lên :root và xử lý <body> như thể background: initial được đặt. Nói cách khác, phần tử <html> nhận tất cả các kiểu background được đặt trên phần tử <body>, và các thuộc tính nền của phần tử <body> được đặt về giá trị ban đầu.

Do hành vi này, các tác giả đặc tả khuyến nghị thiết lập kiểu nền của tài liệu trong khối kiểu body thay vì khối html. Tuy nhiên, điều quan trọng cần lưu ý là sử dụng containment sẽ vô hiệu hóa hành vi này. Khi thuộc tính contain được đặt thành bất kỳ giá trị nào khác none trên phần tử <html> hoặc <body>, thuộc tính background và bất kỳ thành phần longhand nào sẽ không lan truyền từ phần tử <body> sang phần tử <html> gốc.

Định nghĩa chính thức

Cú pháp chính thức

background = 
  <bg-layer>#? , <final-bg-layer>  

<bg-layer> = 
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <bg-clip>                       ||
  <visual-box>                    

<final-bg-layer> = 
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <bg-clip>                       ||
  <visual-box>                    ||
  <'background-color'>            

<bg-image> = 
  <image>  |
  none     

<bg-position> = 
  <position>        |
  <position-three>  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<repeat-style> = 
  repeat-x           |
  repeat-y           |
  repeat-block       |
  repeat-inline      |
  <repetition>{1,2}  

<attachment> = 
  scroll  |
  fixed   |
  local   

<bg-clip> = 
  <visual-box>             |
  [ border-area || text ]  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<background-color> = 
  <color>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<position-three> = 
  [ left | center | right ] && [ [ top | bottom ] <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ top | center | bottom ]  

<length-percentage> = 
  <length>      |
  <percentage>  

<repetition> = 
  repeat     |
  space      |
  round      |
  no-repeat  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Trợ năng

Trình duyệt không cung cấp bất kỳ thông tin đặc biệt nào về hình ảnh nền cho công nghệ hỗ trợ. Điều này đặc biệt quan trọng với trình đọc màn hình, vì trình đọc màn hình sẽ không thông báo sự hiện diện của nó và do đó không truyền đạt gì cho người dùng. Nếu hình ảnh chứa thông tin quan trọng để hiểu mục đích chung của trang, tốt hơn là mô tả nó theo nghĩa ngữ nghĩa trong tài liệu.

• MDN Understanding WCAG, Guideline 1.1 explanations
• Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0

Ví dụ

Thiết lập nền với từ khóa màu và hình ảnh

HTML

<p class="top-banner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>

CSS

.warning {
  background: pink;
}

.top-banner {
  background: url("star-solid.gif") #9999ff repeat-y fixed;
}

Kết quả

Đặc tả

Khả năng tương thích trình duyệt

Xem thêm

• box-decoration-break
• Using gradients
• Using multiple backgrounds