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 的两个图像
以下示例演示了交叉淡入淡出的使用() 函数，其中列出两个图像和一个百分比值，该百分比值决定两个图像的混合。
<html>
<head>
<style>
#box {
width: 700px;
height: 500px;
/* cross-fade() 其中第二张图像的 45% 和第一张图像的其余 55% 将被混合 */
background-image: -webkit-cross-fade(
url("/css/images/border.png"), url("/css/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() 其中第二张图像的 85% 和第一张图像的其余 15% 将被混合 */
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>