Hướng dẫn img css mdn - img css mdn

Cú pháp

Kiểu dữ liệu có thể được biểu diễn với bất kỳ điều nào sau đây:

• Một hình ảnh được biểu thị bằng kiểu dữ liệu url()
• Kiểu dữ liệu
• 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 bản vá màu rắn, được xác định bởi hàm image()
• Một sự pha trộn 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 các hình ảnh được chọn dựa trên độ phân giải được xác định bởi hàm image-set().

Sự mô tả

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

• Hình ảnh có kích thước nội tại (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 nội tại, tồn tại trong nhiều phiên bản bên trong một tệp, như một số định dạng .ICO. (Trong trường hợp này, các kích thước nội tại sẽ là hình ảnh lớn nhất về diện tích và tỷ lệ khung hình tương tự như hộp chứa.)
• Hình ảnh không có kích thước nội tại nhưng với tỷ lệ khung hình nội tại giữa chiều rộng và chiều cao của nó, như SVG hoặc định dạng vectơ khác.
• Hình ảnh không có kích thước nội tại, cũng không phải là tỷ lệ khung hình nội tại, như độ dốc 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 nội tại của nó; (2) kích thước được chỉ định của nó, được xác định bởi các thuộc tính CSS như

nourl.jpg            /* An image file must be defined using the url() function. */
url(report.pdf)      /* A file pointed to by the url() function must be an image. */
element(#fakeid)     /* An element ID must be an existing ID on the page. */
image(z.jpg#xy=0,0)  /* The spatial fragment must be written in the format of xywh=#,#,#,# */
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* every image in an image set must have a different resolutions */

nourl.jpg            /* An image file must be defined using the url() function. */
url(report.pdf)      /* A file pointed to by the url() function must be an image. */
element(#fakeid)     /* An element ID must be an existing ID on the page. */
image(z.jpg#xy=0,0)  /* The spatial fragment must be written in the format of xywh=#,#,#,# */
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* every image in an image set must have a different resolutions */

nourl.jpg            /* An image file must be defined using the url() function. */
url(report.pdf)      /* A file pointed to by the url() function must be an image. */
element(#fakeid)     /* An element ID must be an existing ID on the page. */
image(z.jpg#xy=0,0)  /* The spatial fragment must be written in the format of xywh=#,#,#,# */
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* every image in an image set must have a different resolutions */

Kích thước đối tượng cụ thể được tính toán 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ị bị thiếu được xác định bằng tỷ lệ nội tại, nếu có, kích thước nội tại nếu giá trị được chỉ định khớp hoặc kích thước đối tượng mặc định cho giá trị bị thiếu đó.
• Nếu kích thước được chỉ định xác định cả chiều rộng và chiều cao, kích thước đối tượng cụ thể được tính toán sao cho nó phù hợp với tỷ lệ khung hình nội tại của hình ảnh nhưng không vượt quá kích thước đối tượng mặc định ở bất kỳ chiều nào. Nếu hình ảnh không có tỷ lệ khung hình nội tại, tỷ lệ khung hình nội tại 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 bị thiếu được lấy từ kích thước đối tượng mặc định.

Lưu ý: Không phải tất cả các trình duyệt đều hỗ trợ mọi loại hình ảnh trên mỗi thuộc tính. Xem phần Tương thích trình duyệt để biết chi tiết. Not all browsers support every type of image on every property. See the browser compatibility section for details.

Mối quan tâm 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 để hỗ trợ công nghệ. Điều này chủ yếu quan trọng đối với đầu đọc màn hình, vì một trình đọc màn hình sẽ không công bố sự hiện diện của nó và do đó không có gì cho người dùng của nó. 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ó về mặt ngữ nghĩa trong tài liệu.

• MDN Hiểu WCAG, Hướng dẫn 1.1 Giải thích
• Hiểu tiêu chí thành công 1.1.1 | W3C Hiểu WCAG 2.0

Cú pháp chính thức

Ví dụ

Hình ảnh hợp lệ

url(test.jpg)               /* A , as long as test.jpg is an actual image */
linear-gradient(blue, red)  /* A  */
element(#realid)            /* A part of the webpage, referenced with the element() function,
                               if "realid" is an existing ID on the page */
image(ltr 'arrow.png#xywh=0,0,16,16', red)
                            /* A section 16x16 section of , starting from the top, left of the original
                               image as long as arrow.png is a supported image, otherwise a solid
                               red swatch. If language is rtl, the image will be horizontally flipped. */
cross-fade(20% url(twenty.png), url(eighty.png))
                            /* cross faded images, with twenty being 20% opaque
                               and eighty being 80% opaque. */
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
                            /* a selection of images with varying resolutions */

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

nourl.jpg            /* An image file must be defined using the url() function. */
url(report.pdf)      /* A file pointed to by the url() function must be an image. */
element(#fakeid)     /* An element ID must be an existing ID on the page. */
image(z.jpg#xy=0,0)  /* The spatial fragment must be written in the format of xywh=#,#,#,# */
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* every image in an image set must have a different resolutions */

Xem thêm