background-image

Try it

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

background-image:
  url("/shared-assets/images/examples/lizard.png"),
  url("/shared-assets/images/examples/star.png");

background-image:
  url("/shared-assets/images/examples/star.png"),
  url("/shared-assets/images/examples/lizard.png");

background-image:
  linear-gradient(rgb(0 0 255 / 0.5), rgb(255 255 0 / 0.5)),
  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%;
}

Cú pháp

/* ảnh đơn */
background-image: linear-gradient(black, white);
background-image: url("cat-front.png");

/* nhiều ảnh */
background-image:
  radial-gradient(circle, transparent 45%, black 48%),
  radial-gradient(ellipse farthest-corner, #fc1c14 20%, #cf15cf 80%);

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

Mỗi ảnh nền được chỉ định bằng từ khóa none hoặc một giá trị <image>.

Để chỉ định nhiều ảnh nền, cung cấp nhiều giá trị, phân cách bằng dấu phẩy.

Giá trị

none

Là từ khóa biểu thị sự vắng mặt của ảnh.

<image>

Là một <image> biểu thị ảnh cần hiển thị. Có thể có nhiều ảnh, phân cách bằng dấu phẩy, vì nhiều nền được hỗ trợ.

Mô tả

Các ảnh nền được vẽ trên các lớp ngữ cảnh xếp chồng lên nhau. Lớp đầu tiên được chỉ định được vẽ như thể gần người dùng nhất.

Các viền của phần tử sau đó được vẽ lên trên chúng, và background-color được vẽ bên dưới chúng. Cách các ảnh được vẽ so với hộp và viền của nó được xác định bởi các thuộc tính CSS background-clip và background-origin.

Nếu một ảnh được chỉ định không thể vẽ (ví dụ, khi tệp được biểu thị bởi URI được chỉ định không thể tải), các trình duyệt xử lý nó như thể đó là giá trị none.

Khả năng tiếp cận

Các trình duyệt không cung cấp bất kỳ thông tin đặc biệt nào về ảnh nền cho công nghệ hỗ trợ. Điều này quan trọng chủ yếu đối 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ì đến người dùng của nó. Nếu ảnh chứa thông tin quan trọng để hiểu mục đích tổng thể của trang, tốt hơn là mô tả nó theo 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

Ngoài ra, điều quan trọng là đảm bảo tỷ lệ tương phản giữa ảnh nền và văn bản nền trước đủ cao để những người có thị lực kém có thể đọc được nội dung trang.

Tỷ lệ tương phản màu sắc được xác định bằng cách so sánh độ sáng của giá trị màu văn bản và màu nền. Để đáp ứng Hướng dẫn Tiếp cận Nội dung Web (WCAG), tỷ lệ 4.5:1 là bắt buộc cho nội dung văn bản thân bài và 3:1 cho văn bản lớn hơn như tiêu đề. Văn bản lớn được định nghĩa là 24px trở lên, hoặc in đậm 18.66px trở lên.

• WebAIM: Color Contrast Checker
• Understanding WCAG, Guideline 1.4 explanation
• Understanding Success Criterion 1.4.3 | Understanding WCAG 2.0, W3C (2023)

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

Cú pháp hình thức

background-image = 
  <bg-image>#  

<bg-image> = 
  <image>  |
  none     

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

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

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

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

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

<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>  

Ví dụ

Xếp lớp ảnh nền

Lưu ý rằng ảnh ngôi sao có một phần trong suốt và được xếp lên trên ảnh mèo.

HTML

<div>
  <p class="cats-and-stars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="cats-and-stars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</p>
</div>

CSS

p {
  font-weight: bold;
  font-size: 1.5em;
  color: white;
  text-shadow: 0.07em 0.07em 0.05em black;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn_logo_only_color.png");
}

.cats-and-stars {
  background-image: url("star-transparent.gif"), url("cat-front.png");
  background-color: transparent;
}

Kết quả

Đặc tả

Tương thích trình duyệt

Xem thêm

• <img>

• Các hàm liên quan đến ảnh:

  • linear-gradient()
  • radial-gradient()
  • conic-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • repeating-conic-gradient()
  • <url>

• Sử dụng gradient CSS

• Triển khai sprite ảnh trong CSS

• Mô-đun ảnh CSS

• Các thuộc tính liên quan đến nền

  • background-attachment
  • background-clip
  • background-color
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • Viết tắt background

• Học: Nền và viền

• Sử dụng nhiều nền

• Thay đổi kích thước ảnh nền

• Mô-đun nền và viền CSS