image-set()

Cú pháp

/* Chọn hình ảnh dựa trên độ phân giải */
image-set(
  "image1.jpg" 1x,
  "image2.jpg" 2x
);

image-set(
  url("image1.jpg") 1x,
  url("image2.jpg") 2x
);

/* Chọn gradient dựa trên độ phân giải */
image-set(
  linear-gradient(blue, white) 1x,
  linear-gradient(blue, green) 2x
);

/* Chọn hình ảnh dựa trên định dạng được hỗ trợ */
image-set(
  url("image1.avif") type("image/avif"),
  url("image2.jpg") type("image/jpeg")
);

Giá trị

<image>

Giá trị <image> có thể là bất kỳ loại hình ảnh nào ngoại trừ image set. Hàm image-set() không thể lồng bên trong một hàm image-set() khác.

<string>

URL đến một hình ảnh.

<resolution> Optional

Các đơn vị <resolution> bao gồm x hoặc dppx, cho đơn vị chấm trên mỗi điểm ảnh, dpi cho chấm trên inch, và dpcm cho chấm trên centimét. Mỗi hình ảnh trong một image-set() phải có độ phân giải duy nhất.

type(<string>) Optional

Chuỗi MIME type hợp lệ, ví dụ "image/jpeg".

Cú pháp chính thức

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

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

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

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

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

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

<image-tags> = 
  ltr  |
  rtl  

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

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

<id-selector> = 
  <hash-token>  

Khả năng tiếp cận

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 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 hình ảnh 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 tổng thể của trang, tốt hơn là mô tả nó một cách 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ụ

Sử dụng image-set() để cung cấp các tùy chọn background-image thay thế

Ví dụ này cho thấy cách sử dụng image-set() để cung cấp hai tùy chọn background-image thay thế, được chọn tùy theo độ phân giải cần thiết: phiên bản thông thường và phiên bản độ phân giải cao.

<div class="box"></div>

.box {
  width: 400px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: image-set(
    url("https://mdn.github.io/shared-assets/images/examples/balloons-small.jpg")
      1x,
    url("https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg")
      2x
  );
}

Sử dụng image-set() để cung cấp các định dạng hình ảnh thay thế

Trong ví dụ tiếp theo, hàm type() được dùng để phục vụ hình ảnh ở định dạng AVIF và JPEG. Nếu trình duyệt hỗ trợ avif, nó sẽ chọn phiên bản đó. Nếu không, nó sẽ sử dụng phiên bản jpeg.

<div class="box"></div>

.box {
  width: 400px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: image-set(
    "https://mdn.github.io/shared-assets/images/examples/balloons-landscape.avif"
      type("image/avif"),
    "https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg"
      type("image/jpeg")
  );
}

Thông số kỹ thuật

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

Xem thêm

• <image>
• image()
• element()
• <url>
• <gradient>
• cross-fade()