cross-fade()
cross-fade() CSS 函数可用于以定义的透明度混合两个或多个图像。它可以用于许多基本的图像处理，例如用纯色为图像着色，或者通过将图像与径向渐变结合来突出页面的特定区域。
语法
警告： 规范和当前实现具有不同的语法。首先解释规范语法。
规范语法
cross-fade() 函数接受一个图像列表，其中包含一个百分比，用于定义每个图像在与其他图像混合时保留的透明度。百分比值必须不带引号编码，必须包含 '%' 符号，并且其值必须介于 0% 到 100% 之间。
该函数可以在 CSS 中任何可以使用普通图像引用地方使用。
交叉淡入淡出百分比
将百分比视为每个图像的透明度值。这意味着 0% 的值表示图像完全透明，而 100% 的值表示图像完全不透明。
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% 的透明度。
上面也可以写成
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% 的不透明度。以下两行（几乎）相同
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%);
旧的已实现语法
cross-fade( <image>, <image>, <percentage> )
cross-fade() 函数的规范允许有多个图像，并且每个图像的透明度值独立于其他值。但并非一直如此。最初的语法，已在某些浏览器中实现，只允许两个图像，这两个图像的透明度之和恰好为 100%。最初的语法在 Safari 中受支持，并在 Chrome、Opera 和其他基于 Blink 的浏览器中带有 -webkit- 前缀受支持。
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> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<id-selector> =
<hash-token>
示例
cross-fade 的旧语法
HTML
<div class="cross-fade"></div>
CSS
.cross-fade {
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-函数 |
浏览器兼容性
加载中…