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

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

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

CSS确定一个图像对象实际尺寸的依据有三条：(1)图像的原始尺寸；(2)用CSS属性指定的宽和高，比如width,height or background-size中，(3)图像对象默认大小，由图像使用用途的属性类型决定：

图像对象的实际尺寸计算算法如下：

• 如果宽度和高度都被指定了，则使用这些值会作为图像对象实际尺寸；
• 如果指定了宽度和高度中的一个，恰好这个值匹配上了图像固有宽高比中的一个值，则另一个会使用固有宽高比来确定，否则就使用图像的原始大小来确定没定义的那个值；
• 如果宽度和高度都没有被指定，在不超过图像对象默认尺寸的前提下，将会根据图像的固有宽高比来计算图像对象的实际尺寸；如果图像没有固有宽高比，则会采用图像对象固有宽高比；如果图像对象也没有固有宽高比，则使用图像对象的默认大小（翻译可能会有误，求大神快来翻译）；

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

示例

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

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

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

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

浏览器支持

语法

取值

一个 CSS数据类型可能表示成如下几种类型：

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com