我正在阅读 Jake 的 “目前无法实现任何两个 DOM 元素的交叉淡入淡出”，这是一篇关于如何真正无法以字面意义交叉淡入淡出元素的精彩的极客深度文章。是的，您可以同时为它们的透明度设置动画，但这也不是完全相同。事实证明，Chrome/WebKit 中有一个名为 `-webkit-cross-fade()` 的仅限于 CSS 的函数调用可以解决此问题。 MDN 表示 它是指定的，但已实现的版本有所不同，因此有点乱……但它确实存在。
.el {
background: -webkit-cross-fade(url(img1.svg), url(img2.svg), 50%);
}我甚至不知道有这个东西。
我首先想到的是：如果其中一个图像只是一个空白的透明图像，它是否会将部分透明度应用于另一个图像？因此，它有点像 `background-opacity` 的代理（它不存在，但感觉应该存在）。
我进行了一个测试以查看它是否有效。
它似乎有效！ 这是它的核心内容。
.el {
background-image: -webkit-cross-fade(
url(image.jpg),
url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7),
50%
);这是一个 1px 透明 GIF 的 Base64 编码。
它在 Firefox 中不起作用，但在其他所有浏览器中都起作用。此外，您可以在 CSS 中测试支持，并在这不是增强功能时执行其他操作。
@supports (background: -webkit-cross-fade(url(), url(), 50%)) {
/* Only apply the idea if supported, do the Firefox fallback outside of this */
}这已烘焙到上面的演示中。
您还可以使用 data:image/svg+xml URL，包括 `<image href="…" opacity="50%">`，尽管调整大小可能很麻烦，而且您无法使用自定义属性并可能为透明度设置动画。
如果您真的想用这种技术深入研究并找回背景位置和大小之类的东西，您可以像这样在 SVG 中放入 HTML。
如果您真的想这样做，还可以做各种其他疯狂的事情。组合通常会导致一些非常奇怪的后果。
如果您想减少一些字节，也可以使用 svg。
--transparent: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>");我会选择 CSS 图像，使其更短，并且可能更容易一目了然。
oooo 似乎有效。这很好——我也喜欢可理解性。可以将其命名为 `--transparent-image-in-which-to-combine-with-others-to-fake-background-opacity` 之类。
仅供参考：css-images-4 中有一个规范允许
image(transparent)但出于某种原因，浏览器根本没有费心实现 css-images-4 中的任何内容，即使它在此时已经存在了 5 年以上。
https://www.w3.org/TR/css-images-4/#color-images
Firefox 实现的跟踪错误
https://bugzilla.mozilla.org/show_bug.cgi?id=1657516
LeaVerou 最近为 css-images-5 提出了一个关于 `@image` 语法的提案，它允许在背景等中使用之前对图像进行 CSS 操作。这看起来是长期解决方案。
https://github.com/w3c/csswg-drafts/issues/6807
这可以作为 Firefox 的解决方案吗？
有一种方法可以控制 `background` 层的透明度，但它仅在 Safari 中可用。事实上，它在 Safari 中已经可用超过五年了（查看 这篇文章 的日期！），但此后没有其他浏览器实现它。
我说的是 `filter()` 函数。它获取一个图像（任何图像）和一个 CSS 过滤器（在本例中，我们使用 `opacity()`），并返回过滤后的图像（此处，使原始图像半透明）。
这是一个 实时测试，其中 `body` 后面有一个重复的渐变。