CSS 数据类型 - <image>

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

数据类型<image>可以使用以下任何值表示

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

语法

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

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

所有具有固有尺寸的图像，即具有自然大小的图像，例如JPEG、PNG或其他光栅格式的图像。
所有具有多个固有尺寸的图像，在一个文件中存在多个版本
所有没有固有尺寸但具有固有纵横比的图像（宽度和高度之间的比率），例如SVG或其他矢量格式的图像。
所有既没有固有尺寸也没有固有纵横比的图像，例如 CSS 渐变。

对象的具体大小使用以下方式确定

固有尺寸
指定大小，由 CSS 属性定义，例如width、height或background-size
默认大小，由使用图像的属性类型确定。

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

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

CSS <image> - 计算图像大小

图像的具体大小根据以下算法定义或计算

当指定大小同时定义width和height时，这些值可用于确定对象的具体大小。
当指定大小仅定义width或仅定义height时，缺失的值将使用固有比率确定（如果可用）；如果指定值匹配，则使用固有尺寸，或者使用该缺失值的默认对象大小。
当指定大小既未定义width也未定义height时，对象的尺寸将按比例测量，使其与图像的固有纵横比匹配，并且不超过任何维度的大小。如果图像没有固有纵横比，则使用其应用到的对象的固有纵横比。例如，如果对象也没有固有纵横比，则缺失的宽度或高度将取自默认对象大小。

无障碍问题：辅助技术无法从浏览器获取有关背景图像的任何特殊信息。这对于屏幕阅读器来说非常重要，因为屏幕阅读器不会宣布背景图像的存在，因此不会传达任何相关信息。如果图像包含一些理解整个页面内容的关键信息，这些信息将被忽略。因此，建议在文档中以语义的方式描述重要的信息。

<image> = <url> | <gradient>

/* Valid images */
url(sample.jpg)                                 /* A <url>, as long as sample.jpg is an actual image. */

linear-gradient(red, yellow)                    /* A <gradient> */

element(#realid)                                /* A part of the webpage, referenced with the element() function,
                                                if "realid" is an existing ID on the page. */

cross-fade(20% url(test.png), url(test1.png))   /* cross faded images, with test being 20% opaque
                                                and test1 being 80% opaque. */

image-set('test.jpg' 1x, 'test-2x.jpg' 2x)      /* A selection of images with varying resolutions. */

/*Invalid images */
sample.jpg                                      /* An image file must be defined using url() function. */

url(test.pdf)                                   /* A file pointed by the url() function must be an image. */

element(#fakeid)                                /* An element ID must be an existing ID on the page. */

image(z.jpg#xy=0,0)                             /* The spatial fragment must be written in the format of xywh=#,#,#,# */

image-set('test1.jpg' 1x, 'test2.jpg' 1x)       /* every image in an image set must have a different resolutions */

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

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

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

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

打印页面