image-set()
CSS
function
notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens.
Resolution and bandwidth differ by device and network access. The
image-set()
function delivers the most appropriate image resolution for a user’s device, providing a set of image options — each with an associated resolution declaration — from which the browser picks the most appropriate for the device and settings. Resolution can be used as a proxy for filesize — a user agent on a slow mobile connection with a high-resolution screen may prefer to receive lower-resolution images rather than waiting for a higher resolution image to load.
image-set()
allows the author to provide options rather than determining what each individual user needs.
image-set() = image-set( <image-set-option># )
where <image-set-option> = [ <image> | <string> ] <resolution> and
<string> is an <url>
Most commonly you'll see an
url()
<string>
value, but the
<image>
can be any image type except for an image set. The
image-set()
function can not be nested inside another
image-set()
函数。
<resolution>
units include
x
or
dppx
, for dots per pixel unit,
dpi
, for dots per inch, and
dpcm
for dots per centimeter. Every image within an
image-set()
must have a unique resolution.
background-image: image-set( "cat.png" 1x,
"cat-2x.png" 2x,
"cat-print.png" 600dpi);
This example shows how to use
image-set()
to provide two alternative
background-image
options, chosen depending on the resolution needed: a normal version and a high-resolution version.
Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Images Module Level 4
The definition of 'The image-set() notation' in that specification. |
工作草案 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
image-set()
|
Chrome
完整支持
21
Prefixed
|
Edge
完整支持
79
Prefixed
|
Firefox
不支持
No
注意事项
|
IE 不支持 No |
Opera
完整支持
15
Prefixed
|
Safari
部分支持
6
Prefixed
注意事项
|
WebView Android
完整支持
4.4
Prefixed
|
Chrome Android
完整支持
25
Prefixed
|
Firefox Android
不支持
No
注意事项
|
Opera Android
完整支持
14
Prefixed
|
Safari iOS
部分支持
6
Prefixed
注意事项
|
Samsung Internet Android
完整支持
1.5
Prefixed
|
完整支持
部分支持
不支持
见实现注意事项。
要求使用供应商前缀或不同名称。