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 渐变）的所有图像。

对象的 concreate 大小是通过以下方法确定的：

  • 内在维度
  • 指定大小，由 CSS 属性（如 width、height 或 background-size）定义
  • 默认大小，由图像使用的属性类型确定。

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

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

CSS <image> - 计算图像大小

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

  • 当指定的大小定义宽度和高度时，这些值在确定对象的具体大小时很有用。
  • 当指定的大小仅定义宽度或仅定义高度时，如果可用，则使用固有比率确定缺失的值;如果指定值匹配，则为固有尺寸，或该缺失值的对象的默认大小。
  • 当指定的大小既不定义宽度也不定义高度时，将测量对象的大小，使其与图像的固有纵横比匹配，而不会在任何维度上超过大小。如果图像没有固有的纵横比，则使用它所适用的对象的固有纵横比。例如，如果对象也没有固有的纵横比，则从默认对象大小时取缺失的宽度或高度。
可访问性问题：
浏览器不会在背景图像上向辅助技术提供任何特殊信息。
这在屏幕阅读器的情况下很重要，因为屏幕阅读器不会宣布任何关于背景图像的存在，因此不会传达任何关于它们的信息。
如果图像包含一些用于理解整个页面的关键信息，它将被遗漏。
因此，建议在文档中对重要信息进行语义描述。

<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 元素的背景。

本页
上一页
下一页