<image>

**<image>** CSS 数据类型 表示二维图像。

语法

<image> 数据类型可以使用以下任何一种表示

描述

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

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

示例

有效图像

css
url(test.jpg)               /* A <url>, as long as test.jpg is an actual image */
linear-gradient(blue, red)  /* A <gradient> */
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 <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
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 resolution */

规范

规范
CSS 图像模块 Level 3
# image-values

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见