图像 | <image>

<image>

的<image>CSS数据类型表示2D图像。有两种类型的图像：平纹图像，典型地使用一个URL引用，并动态地生成的图像，就像与所生成的那些<gradient>或element()（元件的图像可以与众多的CSS属性被使用，如。background-image，border-image，content，list-style-image，和cursor。

图像类型

CSS可以处理以下类型的图像：

• 具有固有尺寸（自然尺寸）的图像，如jpeg，png或其他光栅格式。

• 具有多个内在维度的图像，存在于单个文件内的多个版本中，如一些.ico格式。（在这种情况下，固有尺寸将是最大面积的图像，并且纵横比最接近容纳盒）。

• 图像没有固有的尺寸，但是在宽度和高度之间有一个内在的纵横比，就像SVG或其他矢量格式一样。

• 图像既不是内在尺寸，也不是内在纵横比，就像一个CSS梯度。

CSS 使用（1）其内在尺寸来确定对象的具体尺寸 ; （2）由CSS属性定义的指定大小width，height或background-size; （3）其默认大小，由图像的属性类型决定：

具体对象的大小使用以下算法计算：

• 如果指定的大小定义宽度和高度，这些值用作具体的对象大小。

• 如果指定的大小定义只有宽度或高度，缺失值是使用内部比率(如果存在)来确定的，如果指定值匹配，则使用内部维度，或者使用该缺失值的默认对象大小。

• 如果指定的大小定义既不宽，也不高，计算具体对象的尺寸，使其与图像的固有纵横比相匹配，但在任何维度上都不超过默认的对象大小。如果图像没有固有的高宽比，则使用其应用对象的内部高宽比；如果该对象没有，则从默认对象大小中提取丢失的宽度或高度。

注：并非所有浏览器都支持每个属性上的每种类型的图像。见浏览器兼容性部分关于细节。

句法

安<image>可以用下列方式表示：

• 由<url>数据类型和url()（https://developer.mozilla.org/en-US/docs/Web/CSS/url（％29））函数表示的图像

• <gradient>数据类型

• 网页的一部分，由element()（https://developer.mozilla.org/en-US/docs/Web/CSS/element）函数定义

实例

有效图像

url(test.jpg)               /* The url() function, 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 */

无效图像

cervin.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. */

规格

浏览器兼容性