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>

打印页面