CSS参考手册
图像值 | Image Values
图像 |
的<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 |
图像值 | Image Values相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。