CSS 函数 - cross-fade（）

CSS 中的 cross-fade（） 函数用于在指定的透明度下混合两个或多个图像或颜色。

语法


cross-fade(url(image1.png) <percentage>, url(image2.png) <percentage>);

函数 cross-fade（） 以带有百分比值的图像列表的形式获取参数，该百分比值定义了当每个指定图像与其他图像混合时保留多少。百分比值必须在 0 到 100 的范围内，必须包含 % 符号，并且不能在引号中提及。

百分比只不过是每个图像的不透明度值，其中 0% 表示图像是完全透明的，100% 表示完全不透明的图像。
如果未指定百分比值，则将所有其他百分比值相加并从 100% 中减去。什么时候
当结果大于 0% 时，结果将在所有不指定百分比值的图像之间平均分配。
当需要混合两个图像时，其中一个图像只需要有一个百分比值，因为另一个将相应地混合在其中。
如果未为任何图像指定百分比值，则两个图像都将以 50% 的不透明度呈现。
当两个图像都有百分比值，使得两者之和大于 100% 时，则两者仅以各自的百分比值呈现。
当指定了三张图片并且没有传递百分比值时，所有三张图片都将以 33.33% 的不透明度呈现。

可访问性问题：没有向辅助技术提供有关背景图像的特殊信息，因此屏幕阅读器中也不会公布有关背景图像的任何内容。如果这样的背景图像很重要并且意味着对用户的任何信息，那么辅助技术就会错过。建议在文档中对此类信息进行语义描述。

注意：必须根据浏览器为函数添加适当的前缀，例如，在使用 Chrome 时，使用前缀 -webkit。

CSS cross-fade（） - 使用两个带有 URL 的图片

以下示例演示了 cross-fade（） 函数的使用，其中列出了两个图像和一个百分比值，该值决定了两个图像的混合。


<html>
<head>
<style>
	 	#box {
	 	 	 width: 700px;
	 	 	 height: 500px;
	 	
	 	 	 /* cross-fade() where 45% of the second image and balance 55% of first image will be blended */
	 	 	 background-image: -webkit-cross-fade(
	 	 	 	 	url("images/border.png"), url("images/tree.jpg"), 45%);
	 	 	 }
</style>
</head>
<body>
	 	<h1>Cross-fade</h1>
	 	<div id="box"></div>
</body>
</html>

CSS cross-fade（） - 使用 linear-gradient（）

以下示例演示了 cross-fade（） 函数的使用，其中列出了使用 linear-gradient（） 创建的两个图像和一个百分比值，该值决定了两个图像的混合。


<html>
<head>
<style>
	 	#box {
	 	 	 width: 700px;
	 	 	 height: 500px;
	 	
	 	 	 /* cross-fade() where 85% of the second image and balance 15% of first image will be blended */
	 	 	 background-image: -webkit-cross-fade(
	 	 	 	 	linear-gradient(red, yellow), linear-gradient(white, lightblue), 85%);
	 	 	 }
</style>
</head>
<body>
	 	<h1>Cross-fade</h1>
	 	<div id="box"></div>
</body>
</html>

打印本页