CSS 数据类型 <image> - 易学教程，面试笔记经验！

CSS 数据类型 <image> 表示二维图像。

数据类型 <image> 可以用以下任意值表示:

由 url() 数据类型定义的图像
<gradient>数据类型
网页的一部分，由element()函数定义
图像、图像片段或纯色块，由 image() 函数定义
由 cross-fade() 函数定义的两个或多个图像混合。
根据 image-set() 函数定义的分辨率选择的图像选择。

语法

<image> = <url> | <image-list> | <element-reference>  | <gradient></gradient>

CSS 可以处理以下类型的图像:

所有具有固有尺寸的图像，即具有自然尺寸的图像，例如JPEG、PNG或其他raster format的图像.
具有多个内在维度的所有图像，存在于单个文件中的多个版本
具有没有固有尺寸，但其宽度和高度之间具有固有的纵横比，例如 SVG 或矢量格式。
所有既没有固有尺寸，也没有固有纵横比的图像，例如 CSS 渐变。

对象的具体尺寸由以下因素确定:

内在尺寸
指定大小，由宽度、高度或背景大小等 CSS 属性定义
默认大小，由图像所使用的属性类型确定。

下表显示了基于 CSS 属性的图像类型:

对象类型（CSS 属性）	默认对象大小
background-image	大小元素的背景定位区域
list-style-image	1em字符的大小
border-image-source	元素边框图像区域的大小
cursor	浏览器定义的大小与客户端系统上通常的光标大小相匹配
mask-image	用作遮罩层的图像。
shape-outside	定义与内联内容相邻的形状
mask-border-source	设置图像以创建元素的蒙版边框
symbols() for @counter-style	如果支持，浏览器定义的大小与屏幕上通常的光标大小相匹配客户端系统
伪元素内容(::after / ::before)	300px × 150px 矩形

CSS <image> - 计算图像尺寸

图像的具体尺寸是根据以下算法定义或计算的:

当指定的大小同时定义宽度和高度时，这些值可用于确定对象的具体大小。
当指定的大小仅定义宽度或仅定义高度，缺少的值使用固有比率确定（如果可用）；如果指定的值匹配，则为固有尺寸，或者为该缺失值的对象的默认尺寸。
当指定的尺寸既不定义宽度也不定义高度时，则对物体进行测量，使其与图像的固有纵横比相匹配，但不会超过任何维度的尺寸。如果图像没有固有纵横比，则使用其所应用的对象的固有纵横比。例如，如果对象也没有固有的宽高比，则缺少的宽度或高度将从默认对象大小中获取。

辅助功能问题:浏览器未向辅助技术提供有关背景图像的任何特殊信息。这对于屏幕阅读器来说非常重要，因为屏幕阅读器不会宣布任何有关背景图像存在的信息，因此无法传达任何有关背景图像的信息。如果图像包含一些对于理解整个页面至关重要的信息，则会被错过。因此，建议在文档中对重要信息进行语义描述。

<image> = <url> | <gradient>
/* Valid images */
url(sample.jpg)                                 /* 一个<url>，只要sample.jpg是实际图像。 */
linear-gradient(red, yellow)                    /* A <gradient> */
element(#realid)                                /* 网页的一部分，用 element() 函数引用，如果“realid”是页面上现有的 ID。 */

cross-fade(20% url(test.png), url(test1.png))   /* 交叉淡入淡出的图像，test为 20% 不透明
                                                 test1 80% 不透明。
 */
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)      /* 选择不同分辨率的图像。 */
/*Invalid images */
sample.jpg                                      /* 必须使用 url() 函数定义图像文件。 */
url(test.pdf)                                   /* url() 函数指向的文件必须是图像。 */
element(#fakeid)                                /* 元素 ID 必须是页面上现有的 ID。 */
image(z.jpg#xy=0,0)                             /* 空间片段必须按照 xywh=#,#,#,# 的格式写入 */
image-set('test1.jpg' 1x, 'test2.jpg' 1x)       /* 图像集中的每个图像必须具有不同的分辨率 */

CSS <image>: 与 url() 一起使用

以下示例演示了 <image> 的使用使用 url() 函数定义图像的数据类型。通过CSS属性background-image将图像用作背景:

<html>
<head>
<style>
   div {
      background-image: url(/css/images/border.png);
      width: 200px;
      height: 200px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <div></div>
</body>
</html>

在上面的示例中，使用了url()函数，该函数又使用数据类型<image>将图像设置为背景用于 div 元素。

CSS <image>: 与 Linear-gradient() 一起使用

以下示例演示如何使用 <image> 数据类型通过 Linear-gradient() 函数定义图像。通过CSS属性background-image将图像用作背景:

<html>
<head>
<style>
   div {
      background-image: linear-gradient(red, yellow, blue, green, pink);
      width: 200px;
      height: 200px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <div></div>
</body>
</html>

在上面的示例中，使用了 Linear-gradient() 函数，该函数又使用数据类型 <image> 来设置图像作为 div 元素的背景。

CSS <image>: 与 cross-fade() 一起使用

以下示例演示如何使用 <image> 数据类型通过 cross-fade() 定义图像功能。该图像通过CSS属性background-image用作背景:

<html>
<head>
<style>
   div {
      background-image: -webkit-cross-fade(url(/css/images/border.png), url(/css/images/tree.jpg), 25%);
      background-image: cross-fade(url(/css/images/border.png), url(/css/images/tree.jpg), 25%);
      width: 300px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <div></div>
</body>
</html>

在上面的示例中，使用了cross-fade()函数，该函数又使用数据类型<image>来设置混合作为 div 元素背景的图像。