<image>

综述：

CSS的<image>数据类型描述的是2D图形。在CSS中有两种类型的图像：简单的静态图像，经常被一个在使用的URL引用，动态生成的图像，比如DOM树的部分元素样式渐变或者计算样式产生。

CSS可以处理以下情形中的不同类型图像：

• 固有的尺寸（大小）的图像，即图像的原始尺寸（大小），比如一个jpeg格式的图像有他自己的固有尺寸（大小）；
• 存在于一个文件中不同版本多个固定尺寸的图像，比如有些.ico格式的图像。在这种情况下，将图像的尺寸表现为这些图像中尺寸较大的一个，也就是在表层展示出来最接近外层容器比例尺寸的那个图像；
• 对于没有固定大小但有一个尺寸方面比例的图像，图像的比例在宽度和高度之中，像一些矢量图形，比如SVG格式的图像；
• 对于即没有固定大小也没有高宽比例的图像，比如CSS渐变（图像）；

CSS根据这些提供的固定尺寸决定图像对象的正确尺寸，指定的尺寸被定义在CSS属性像width, height or background-size中,默认使用的图像对象尺寸定义在以下类别的图像属性中：

图像的有效尺寸计算算法如下：

• 如果图像的宽度和高度都被指定了，则使用这些值会作为计算后的有效尺寸；
• 如果指定了图像宽度和高度中的一个，没有定义的一个会使用任何一个定义的比例值，如果指定的值匹配图像的原始大小，则使用图像的原始大小作为没有定义的那个值；
• 如果图像的宽度和高度都没有被指定，有效的尺寸将使用图像的原始尺寸，图像的尺寸不会超过原始尺寸的任何一个大小，如果图像没有原始尺寸，则尺寸采用图像对象的比例，如果没有定义比例，则使用对象的默认大小（这段真的是翻不下去了，扎心了，老铁0_0||）；

图像可以使用很多CSS属性，比如 background-image, border-image, content, list-style-image 和cursor；

语法

一个<image>CSS数据类型可能像如下情形展示：

• 一个图像被引用为CSS <uri>数据类型使用url()方法；
• 一个CSS<gradient>;
• 页面的一个部分，定义在element()方法中；

示例

以下是有效的图像引用值：

url(test.jpg)                          url()方法, 只要test.jpg是图像文件
linear-gradient(to bottom, blue, red)  一个 <gradient>标签
element(#colonne3)                     页面的一部分, 使用了element()方法,
                                       如果 colonne3 是存在于页面中的一个元素id即可

以下是无效的图像引用值：

cervin.jpg                             图像文件必须使用url()方法定义
url(report.pdf)                        url()方法指向的文件链接必须是一个图像文件
element(#fakeid)                       如果fakeid是一个不存在与页面的元素id

规格

浏览器兼容性

参阅：

• Using CSS gradients, <gradient>, linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient()
• element()