介绍
CSS 的<image> 数据类型 描述的是 2D 图形。
图像的类型：
- 简单的静态图像，经常被一个在使用的 URL 引用。
- 动态生成的图像，比如 DOM 树的部分元素样式渐变或者计算样式产生。
CSS 可以处理一下情形中的不同类型图像：
具有 单一固定尺寸（大小）的图像。
即图像具有自己的原始尺寸（大小），比如一个 jpeg 格式的图像有他自己的固有尺寸（大小）。具有 多个固定尺寸 的图像。
可在一个文件中存在多个不同版本的尺寸，比如有些.ico 格式的图像。在这种情况下，图像表现出来的固有尺寸将是这些尺寸较大的一个，也就是最接近外层包含它的容器纵横比的那个图像；无 固定尺寸 有 固定纵横比 的图像
像一些矢量图形，比如 SVG 格式的图像；无 固定尺寸 无 固定纵横比 的图像
CSS的渐变图像
CSS 确定图像尺寸的依据：
- 图像的原始尺寸
- 用 CSS 属性指定的宽和高
- 图像对象默认大小，由图像使用用途的属性类型决定，如下：
| 图像对象类型 | 默认的图像对象尺寸 |
|---|---|
background-image |
DOM 元素的背景定位的范围尺寸（大小） |
list-style-image |
字符的 1em 尺寸（大小） |
border-image |
DOM 元素的边框图像范围尺寸（大小） |
cursor |
浏览器定义的光标尺寸匹配在使用操作系统上常规的光标尺寸 |
用 CSS content属性，和 CSS 伪元素 ::after和 ::before替换元素内容 |
一个 300px × 150px 矩形 |
图像对象的实际尺寸计算算法如下：
- 如果宽度和高度都被指定了，则使用这些值会作为图像对象实际尺寸；
- 如果指定了宽度和高度中的一个，恰好这个值匹配上了图像固有宽高比中的一个值，则另一个会使用固有宽高比来确定，否则就使用图像的原始大小来确定没定义的那个值；
- 如果宽度和高度都没有被指定，在不超过图像对象默认尺寸的前提下，将会根据图像的固有宽高比来计算图像对象的实际尺寸；如果图像没有固有宽高比，则会采用图像对象固有宽高比；如果图像对象也没有固有宽高比，则使用图像对象的默认大小；
图像可以使用很多 CSS 属性，比如 background-image, border-image, content, list-style-image和cursor；
备注： 不是所有的浏览器都支持任何类型的图像的任何属性，详情查看浏览器兼容性了全面的条目列表
语法
一个 <image> CSS 数据类型可能表示成如下几种类型：
- 一个图像被引用为 CSS
<url>数据类型使用 url() 方法； - 一个 CSS
<gradient>; - 页面的一个部分，定义在
element()方法中；
示例：
url() 方法，只要 test.jpg 是图像文件
url(test.jpg)
一个 <gradient>标签
linear-gradient(to bottom, blue, red)
页面的一部分，使用了 element() 方法， 如果 colonne3 是存在于页面中的一个元素 id 即可
element(#colonne3)
