cross-fade()

**cross-fade()** CSS 函数 可用于以定义的透明度混合两个或多个图像。它可用于许多简单的图像操作，例如使用纯色为图像着色，或通过将图像与径向渐变组合来突出显示页面上的特定区域。

语法

**警告：**规范和当前实现的语法不同。首先解释规范语法。

规范语法

cross-fade() 函数接受一个图像列表，以及一个百分比，用于定义在将每个图像与其他图像混合时保留的图像不透明度。百分比值必须在没有引号的情况下编码，必须包含“%”符号，并且其值必须介于 0% 和 100% 之间。

该函数可以在 CSS 中任何普通图像引用可以使用的地方使用。

交叉渐变百分比

将百分比视为每个图像的不透明度值。这意味着 0% 的值表示图像完全透明，而 100% 的值表示图像完全不透明。

css
cross-fade(url(white.png) 0%, url(black.png) 100%); /* fully black */
cross-fade(url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */
cross-fade(url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */
cross-fade(url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */
cross-fade(url(white.png) 100%, url(black.png) 0%); /* fully white */
cross-fade(url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */

如果省略任何百分比，则将所有指定的百分比加起来并从 100% 中减去。如果结果大于 0%，则将结果平均分配给所有省略百分比的图像。

在最简单的情况下，两个图像之间会相互淡入淡出。为此，只需要其中一个图像具有百分比，另一个图像将相应地淡入淡出。例如，为第一个图像定义的 0% 值仅产生第二个图像，而 100% 值仅产生第一个图像。25% 的值将第一个图像呈现为 25%，第二个图像呈现为 75%。75% 的值是反向的，显示第一个图像为 75%，第二个图像为 25%。

上面也可以写成

css
cross-fade(url(white.png) 0%, url(black.png)); /* fully black */
cross-fade(url(white.png) 25%, url(black.png)); /* 25% white, 75% black */
cross-fade(url(white.png), url(black.png)); /* 50% white, 50% black */
cross-fade(url(white.png) 75%, url(black.png)); /* 75% white, 25% black */
cross-fade(url(white.png) 100%, url(black.png)); /* fully white */
cross-fade(url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */

如果没有声明百分比，则两个图像将具有 50% 的不透明度，交叉渐变呈现为两个图像的均匀合并。上面看到的 50%/50% 示例不需要列出百分比，因为当省略百分比值时，包含的百分比加起来并从 100% 中减去。如果结果大于 0，则将结果平均分配给所有省略百分比的图像。

在最后一个示例中，两个百分比的总和不为 100%，因此两个图像都包含各自的不透明度。

如果没有声明百分比并且包含三个图像，则每个图像将具有 33.33% 的不透明度。以下两行（几乎）相同

css
cross-fade(url(red.png), url(yellow.png), url(blue.png)); /* all three will be 33.3333% opaque */
cross-fade(url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);

旧的，已实现的语法

css
cross-fade( <image>, <image>, <percentage> )

cross-fade() 函数的规范允许使用多个图像，并允许每个图像具有独立于其他值的不透明度值。情况并非总是如此。最初的语法（已在某些浏览器中实现）仅允许两个图像，这两个图像的不透明度之和正好为 100%。原始语法在 Safari 中受支持，并在 Chrome、Opera 和其他基于 Blink 的浏览器中使用 -webkit- 前缀受支持。

css
cross-fade(url(white.png), url(black.png), 0%);   /* fully black */
cross-fade(url(white.png), url(black.png), 25%);  /* 25% white, 75% black */
cross-fade(url(white.png), url(black.png), 50%);  /* 50% white, 50% black */
cross-fade(url(white.png), url(black.png), 75%);  /* 75% white, 25% black */
cross-fade(url(white.png), url(black.png), 100%); /* fully white */

在已实现的语法中，首先声明两个用逗号分隔的图像，然后是逗号和所需的百分比值。省略逗号或百分比会使值无效。百分比是第一个声明的图像的不透明度。包含的百分比从 100% 中减去，差值为第二个图像的不透明度。

规范语法部分中的绿色/红色示例（百分比总计 150%）和黄色/红色/蓝色示例（三个图像）在此实现中是不可能的。

无障碍访问

浏览器不会向辅助技术提供任何关于背景图像的特殊信息。这主要对屏幕阅读器很重要，因为屏幕阅读器不会宣布其存在，因此不会向其用户传达任何信息。如果图像包含对理解页面整体目的至关重要的信息，最好在文档中以语义方式对其进行描述。使用背景图像时，请确保颜色对比度足够大，以便任何文本在图像上以及图像丢失时都清晰可见。

正式语法

<cross-fade()> = 
  cross-fade( <cf-image># )  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

示例

旧的交叉淡入淡出语法

HTML

html
<div class="crossfade"></div>

CSS

css
.crossfade {
  width: 300px;
  height: 300px;
  background-image: -webkit-cross-fade(url("br.png"), url("tr.png"), 75%);
  background-image: cross-fade(url("br.png"), url("tr.png"), 75%);
}

结果

规范

规范
CSS 图像模块级别 4
# cross-fade-function

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅