<image>

Cú pháp

Kiểu dữ liệu <image> có thể được biểu diễn bằng bất kỳ cách nào sau đây:

• Một hình ảnh được biểu thị bởi kiểu dữ liệu <url>
• Một kiểu dữ liệu <gradient>
• Một phần của trang web, được xác định bởi hàm element()
• Một hình ảnh, đoạn hình ảnh hoặc mảng màu đồng nhất, được xác định bởi hàm image()
• Sự kết hợp của hai hoặc nhiều hình ảnh được xác định bởi hàm cross-fade().
• Một lựa chọn hình ảnh được chọn dựa trên độ phân giải được xác định bởi hàm image-set().
• Được tạo bởi một paint worklet với hàm paint().

Mô tả

CSS có thể xử lý các loại hình ảnh sau:

• Hình ảnh có kích thước cố hữu (kích thước tự nhiên), như JPEG, PNG, hoặc định dạng raster khác.
• Hình ảnh có nhiều kích thước cố hữu, tồn tại trong nhiều phiên bản bên trong một tệp duy nhất, như một số định dạng .ico. (Trong trường hợp này, kích thước cố hữu sẽ là kích thước của hình ảnh lớn nhất về diện tích và có aspect ratio gần nhất với hộp chứa.)
• Hình ảnh không có kích thước cố hữu nhưng có tỉ lệ khung hình cố hữu giữa chiều rộng và chiều cao, như SVG hoặc định dạng vector khác.
• Hình ảnh không có cả kích thước cố hữu lẫn tỉ lệ khung hình cố hữu, như gradient CSS.

CSS xác định kích thước cụ thể của một đối tượng bằng cách sử dụng (1) kích thước cố hữu của nó; (2) kích thước được chỉ định, được xác định bởi các thuộc tính CSS như width, height, hoặc background-size; và (3) kích thước mặc định, được xác định bởi loại thuộc tính mà hình ảnh được sử dụng:

Kích thước đối tượng cụ thể được tính bằng thuật toán sau:

• Nếu kích thước được chỉ định xác định cả chiều rộng và chiều cao, các giá trị này được sử dụng làm kích thước đối tượng cụ thể.
• Nếu kích thước được chỉ định chỉ xác định chiều rộng hoặc chỉ chiều cao, giá trị còn thiếu được xác định bằng tỉ lệ cố hữu nếu có, kích thước cố hữu nếu giá trị được chỉ định khớp, hoặc kích thước đối tượng mặc định cho giá trị còn thiếu đó.
• Nếu kích thước được chỉ định không xác định cả chiều rộng lẫn chiều cao, kích thước đối tượng cụ thể được tính để khớp với tỉ lệ khung hình cố hữu của hình ảnh nhưng không vượt quá kích thước đối tượng mặc định theo bất kỳ chiều nào. Nếu hình ảnh không có tỉ lệ khung hình cố hữu, tỉ lệ khung hình cố hữu của đối tượng mà nó áp dụng được sử dụng; nếu đối tượng này không có, chiều rộng hoặc chiều cao còn thiếu được lấy từ kích thước đối tượng mặc định.

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ề 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 nó và do đó không truyền đạt bất cứ điều 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ó theo 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

Cú pháp chính thức

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

Hình ảnh hợp lệ

url("test.jpg")               /* Một <url>, miễn là test.jpg là hình ảnh thực */
linear-gradient(blue, red)  /* Một <gradient> */
element(#real-id)            /* Một phần của trang web, được tham chiếu bằng hàm element(),
                               nếu "real-id" là một ID tồn tại trên trang */
image(ltr "arrow.png#xywh=0,0,16,16", red)
                            /* Phần 16x16 của <url>, bắt đầu từ góc trên, trái của hình ảnh gốc
                               miễn là arrow.png là hình ảnh được hỗ trợ, nếu không thì một mảng màu đỏ.
                               Nếu ngôn ngữ là rtl, hình ảnh sẽ bị lật ngang. */
cross-fade(20% url("twenty.png"), url("eighty.png"))
                            /* hình ảnh cross faded, với twenty có 20% độ mờ
                               và eighty có 80% độ mờ. */
image-set("test.jpg' 1x, 'test-2x.jpg" 2x)
                            /* lựa chọn hình ảnh với độ phân giải khác nhau */

Hình ảnh không hợp lệ

"no-url.jpg"           /* File hình ảnh phải được định nghĩa bằng hàm url(). */
url("report.pdf")      /* File được trỏ đến bởi hàm url() phải là hình ảnh. */
element(#fakeid)     /* ID phần tử phải là ID tồn tại trên trang. */
image(z.jpg#xy=0,0)  /* Fragment không gian phải được viết theo định dạng xywh=#,#,#,# */
image-set("cat.jpg" 1x, "dog.jpg" 1x) /* mọi hình ảnh trong image set phải có độ phân giải khác nhau */

Thông số kỹ thuật

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

Xem thêm

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