综述:

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

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

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

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

图像对象类型 默认的图像对象尺寸
background-image DOM元素的背景定位的范围尺寸(大小)
list-style-image  字符的1em尺寸(大小)
border-image DOM元素的边框图像范围尺寸(大小)
cursor 浏览器定义的光标尺寸匹配在使用操作系统上常规的光标尺寸
用 CSS content属性,和CSS伪元素 ::after::before替换元素内容 一个300px × 150px 矩形

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

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

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

提示: 不是所有的浏览器都在任何属性上支持任何类型的图像,查看浏览器兼容性了全面的条目列表

语法

一个<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

规格

规格 状态 备注
CSS Images Module Level 3
image()
Candidate Recommendation

在CSS3之前没有明确的定义出<image>数据类型,图像只能被定义在url()方法中。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
<uri> (Yes) (Yes) (Yes) (Yes) (Yes)
<gradient> (Yes)
limited to background-image & background-moz
(Yes)-webkit IE 10-ms (Yes)-o (Yes)-webkit
element() 4.0 (2.0) limited to background-image & background-moz ? ? ? ?
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
<uri> (Yes) (Yes) (Yes) (Yes) (Yes)
<gradient> (Yes)
limited to background-image & background-moz
? ? ? ?
element() 4.0 (2.0) limited to background-image & background-moz ? ? ? ?

参阅:

文档标签和贡献者

此页面的贡献者: mozhs, Sebastianz, mrstork, fscholz, ziyunfei, MoYuLing, vicvinc, FredWe
最后编辑者: mozhs,