<image>
Baseline 广泛可用 *
语法
<image> 数据类型可以用以下任意一种表示：
- 由
<url>数据类型表示的图像 - 一个
<gradient>数据类型 - 网页的一部分，由
element()函数定义 - 由
image()函数定义的图像、图像片段或纯色块 - 由
cross-fade()函数定义的两个或多个图像的混合。 - 根据分辨率选择的图像，由
image-set()函数定义。 - 由 绘制工作let 使用
paint()函数生成。
描述
CSS 可以处理以下几种图像：
- 具有固有尺寸（自然大小）的图像，如 JPEG、PNG 或其他栅格格式。
- 具有多个固有尺寸的图像，在一个文件中存在多个版本，如一些 .ico 格式。（在这种情况下，固有尺寸将是面积最大且宽高比与包含框最相似的图像的尺寸。）
- 没有固有尺寸但具有固有宽高比的图像，如 SVG 或其他矢量格式。
- 既没有固有尺寸也没有固有宽高比的图像，如 CSS 渐变。
CSS 使用 (1) 对象的固有尺寸；(2) 对象的指定尺寸，由 CSS 属性如 width、height 或 background-size 定义；以及 (3) 对象的默认尺寸，由图像使用的属性类型决定，来确定对象的具体尺寸
| 对象类型 (CSS 属性) | 默认对象尺寸 |
|---|---|
background-image |
元素的背景定位区域的大小 |
list-style-image |
一个 1em 字符的大小 |
border-image-source |
元素的边框图像区域的大小 |
cursor |
浏览器定义的，与客户端系统上通常的鼠标光标大小匹配的大小 |
mask-image |
? |
shape-outside |
? |
mask-border-source |
? |
symbols() 用于 @counter-style |
有风险的特性。如果支持，浏览器定义的，与客户端系统上通常的鼠标光标大小匹配的大小 |
伪元素的 content (::after/::before) |
一个 300px × 150px 的矩形 |
具体对象尺寸使用以下算法计算：
- 如果指定尺寸定义了宽度和高度，则这些值用作具体对象尺寸。
- 如果指定尺寸只定义了宽度或只定义了高度，则如果存在固有比例，则使用固有比例确定缺失值；如果指定值匹配，则使用固有尺寸；或者使用该缺失值的默认对象尺寸。
- 如果指定尺寸既没有定义宽度也没有定义高度，则计算具体对象尺寸，使其与图像的固有宽高比匹配，但任何维度都不能超过默认对象尺寸。如果图像没有固有宽高比，则使用它所应用的对象的固有宽高比；如果该对象也没有，则缺失的宽度或高度取自默认对象尺寸。
注意：并非所有浏览器都支持所有属性上的每种图像类型。请参阅浏览器兼容性部分了解详细信息。
无障碍
浏览器不会向辅助技术提供任何有关背景图像的特殊信息。这对于屏幕阅读器来说尤其重要，因为屏幕阅读器不会播报背景图像的存在，因此也不会向其用户传达任何信息。如果图像包含对理解页面整体目的至关重要的信息，最好在文档中以语义化的方式对其进行描述。
正式语法
<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>
示例
有效图像
css
url("test.jpg") /* A <url>, as long as test.jpg is an actual image */
linear-gradient(blue, red) /* A <gradient> */
element(#real-id) /* A part of the webpage, referenced with the element() function,
if "real-id" is an existing ID on the page */
image(ltr "arrow.png#xywh=0,0,16,16", red)
/* A section 16x16 section of <url>, 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 */
无效图像
css
"no-url.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 resolution */
规范
| 规范 |
|---|
| CSS 图像模块第三级 # image-values |
浏览器兼容性
加载中…