image()

语法

/* Basic usage */
image("image1.jpg");
image(url("image2.jpg"));

/* Bidi-sensitive Images */
image(ltr "image1.jpg");
image(rtl "image1.jpg");

/* Image Fallbacks */
image("image1.jpg", black);

/* Image Fragments */
image("image1.jpg#xywh=40,0,20,20");

/* Solid-color Images */
image(rgb(0 0 255 / 0.5)), url("bg-image.png");

值

image-tags 可选

图像的方向性，可以是 ltr（从左到右）或 rtl（从右到左）。

image-src 可选

零个或多个 <url> 或 <string>，用于指定图像源，可带有可选的图像片段标识符。

color 可选

一个颜色值，指定在没有找到、不支持或未声明任何 image-src 的情况下用作后备的纯色背景。

双向感知

image() 标记的第一个可选参数是图像的方向性。如果包含此参数，并且图像被用在方向性相反的元素上，那么在水平书写模式下，图像将被水平翻转。如果省略了方向性，那么即使语言方向改变，图像也不会被翻转。

图像片段

url() 和 image() 的一个关键区别是能够向图像源添加媒体片段标识符——一个包含 x 和 y 轴起点的坐标以及宽度和高度——从而只显示源图像的一部分。参数中定义的图像部分将成为一个独立的图像。其语法如下：

background-image: image("my-image.webp#xywh=0,20,40,60");

元素的背景图像将是 myImage.webp 图像中从坐标 (0px, 20px)（左上角）开始，宽 40px、高 60px 的部分。

#xywh=#,#,#,# 媒体片段语法接受四个逗号分隔的数值。前两个值表示所创建框的起始点的 X 和 Y 坐标。第三个值是框的宽度，最后一个值是高度。默认情况下，这些值是像素值。媒体规范中的空间维度定义指出，百分比也将得到支持。

xywh=160,120,320,240        /* results in a 320x240 image at x=160 and y=120 */
xywh=pixel:160,120,320,240  /* results in a 320x240 image at x=160 and y=120 */
xywh=percent:25,25,50,50    /* results in a 50%x50% image at x=25% and y=25% */

图像片段也可以在 url() 标记中使用。#xywh=#,#,#,# 媒体片段语法是“向后兼容”的，即如果媒体片段不被理解，它将被忽略，并且在与 url() 一起使用时不会破坏源调用。如果浏览器不理解媒体片段标记，它会忽略该片段，显示整个图像。

理解 image() 的浏览器也理解片段标记。因此，如果在 image() 中不理解该片段，则该图像将被视为无效。

颜色后备

如果在 image() 中与图像源一起指定了颜色，那么当图像无效且不显示时，它将作为后备。在这种情况下，image() 函数的渲染效果就像没有包含图像一样，生成一个纯色图像。举个例子，假设一个深色图像被用作某些白色文本的背景。如果图像无法渲染，可能需要一个深色背景色来保证前景文本的可读性。

省略图像源但包含颜色是有效的，并且会创建一个色块。与声明一个位于所有背景图像下方或背后的 background-color 不同，这种方法可以用来将（通常是半透明的）颜色置于其他图像之上。

色块的大小可以通过 background-size 属性设置。这与 background-color 不同，后者设置的颜色会覆盖整个元素。image(color) 和 background-color 的位置都会受到 background-clip 和 background-origin 属性的影响。

正式语法

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

<image-tags> = 
  ltr  |
  rtl  

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

无障碍

浏览器不会向辅助技术提供任何有关背景图像的特殊信息。这对于屏幕阅读器来说尤其重要，因为屏幕阅读器不会播报背景图像的存在，因此也不会向其用户传达任何信息。如果图像包含对理解页面整体目的至关重要的信息，最好在文档中以语义化的方式对其进行描述。

• MDN 理解 WCAG，指南 1.1 解释
• 理解成功标准 1.1.1 | W3C 理解 WCAG 2.0

此功能可以通过在图像加载失败时提供后备颜色来帮助提高可访问性。虽然这可以通过在每个背景图像上包含一个 background-color 来实现，并且也应该这样做，但 CSS image() 函数允许仅在图像加载失败时添加背景颜色，这意味着你可以在透明的 PNG/GIF/WebP 图像加载失败时添加一个后备颜色。

示例

方向敏感的图像

<ul>
  <li dir="ltr">Bullet is a right facing arrow on the left</li>
  <li dir="rtl">Bullet is the same arrow, flipped to point left.</li>
</ul>

ul {
  list-style-image: image(ltr "rightarrow.png");
}

在从左到右的列表项中——即那些在元素本身上设置了 dir="ltr" 或从祖先元素或页面默认值继承了该方向性的列表项——图像将按原样使用。而在 <li> 上设置了 dir="rtl" 或从祖先元素（例如设置为阿拉伯语或希伯来语的文档）继承了从右到左方向性的列表项，其项目符号将显示在右侧，并水平翻转，就好像设置了 transform: scaleX(-1) 一样。文本也将从右到左显示。

显示背景图像的一部分

<div class="box">Hover over me. What cursor do you see?</div>

.box:hover {
  cursor: image("sprite.png#xywh=32,64,16,16");
}

当用户将鼠标悬停在方框上时，光标将改变，以显示雪碧图（sprite image）中从 x=32 和 y=64 开始的 16x16 像素部分。

在背景图像上放置颜色

.quarter-logo {
  height: 200px;
  width: 200px;
  border: 1px solid;
}

.quarter-logo {
  background-image: image(rgb(0 0 0 / 25%)), url("firefox.png");
  background-size: 25%;
  background-repeat: no-repeat;
}

<div class="quarter-logo">
  If supported, a quarter of this div has a darkened logo
</div>

以上代码将在 Firefox 标志背景图像上放置一个半透明的黑色遮罩。如果我们改用 background-color 属性，颜色会出现在标志图像的后面而不是上面。此外，整个容器都会有相同的背景颜色。因为我们使用了 image() 并结合了 background-size 属性（并使用 background-repeat 属性阻止了图像重复），所以色块只会覆盖容器的四分之一。

规范

浏览器兼容性

目前没有浏览器支持此功能。

另见

• <image>
• element()
• <url>
• clip-path
• <gradient>
• image-set()
• cross-fade()
• CSS 图像模块