图像 | <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）其默认大小，由图像的属性类型决定：
Kind of object | Default object size |
|---|---|
background-image | The size of the element's background positioning area |
list-style-image | The size of a 1em character |
border-image | The size of the element's border image area |
cursor | The browser-defined size matching the usual cursor size on the client's system |
border-image-source | ? |
mask-image | ? |
shape-outside | ? |
mask-border-source | ? |
Replaced content, as when combining content with a pseudo-element (::after or ::before) | A 300px × 150px rectangle |
具体对象的大小使用以下算法计算：
- 如果指定的大小定义宽度和高度，这些值用作具体的对象大小。
- 如果指定的大小定义只有宽度或高度，缺失值是使用内部比率(如果存在)来确定的，如果指定值匹配，则使用内部维度，或者使用该缺失值的默认对象大小。
- 如果指定的大小定义既不宽，也不高，计算具体对象的尺寸，使其与图像的固有纵横比相匹配，但在任何维度上都不超过默认的对象大小。如果图像没有固有的高宽比，则使用其应用对象的内部高宽比；如果该对象没有，则从默认对象大小中提取丢失的宽度或高度。
注：并非所有浏览器都支持每个属性上的每种类型的图像。见浏览器兼容性部分关于细节。
句法
安<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. */规格
Specification | Status | Comment |
|---|---|---|
CSS Image Values and Replaced Content Module Level 4The definition of '<image>' in that specification. | Working Draft | Adds element(), image(), conic-gradient(), repeating-conic-gradient(), image-resolution. |
CSS Image Values and Replaced Content Module Level 3The definition of '<image>' in that specification. | Candidate Recommendation | Before CSS3, there was no explicitly defined <image> data type. Images could only be defined using the url() functional notation. |
浏览器兼容性
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
<uri> | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
<gradient> | (Yes) limited to background-image & border-image & mask-image | (Yes)-webkit | IE 10-ms | (Yes) | (Yes) |
element() | 4.0 (2.0) limited to background-image & background-moz | No support | No support | No support | No support |
Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
<uri> | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
<gradient> | (Yes) limited to background-image & border-image & mask-image | ? | ? | ? | ? |
element() | 4.0 (2.0) limited to background-image & background-moz | No support | No support | No support | No support |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
