也许有点背景不透明度？

我正在阅读 Jake 的“交叉淡入淡出任何两个 DOM 元素目前是不可能的”，这是一个奇妙的书呆子，深入探讨了如何没有真正的方法来真正地交叉淡入淡出元素。是的，您可以为它们的不透明度设置动画，但即使如此也不完全相同。原来有一个 Chrome/WebKit-only CSS 函数调用-webkit-cross-fade()可以解决这个问题。MDN 说它是specced，但实现的版本不同，所以有点乱……但它确实存在：

<span style="background-color:#1b1b1b"><span style="color:#f5d67b"><code class="language-css"><span style="color:#f5d67b">.el</span> <span style="color:#72e0d1">{</span>
  <span style="color:#72e0d1">background</span><span style="color:#72e0d1">:</span> -webkit-cross-fade<span style="color:#72e0d1">(</span><span style="color:#aa7ee1">url(img1.svg)</span><span style="color:#72e0d1">,</span> <span style="color:#aa7ee1">url(img2.svg)</span><span style="color:#72e0d1">,</span> <span style="color:#fc9463">50</span>%<span style="color:#72e0d1">)</span><span style="color:#72e0d1">;</span>
<span style="color:#72e0d1">}</span></code></span></span>

我什至不知道这是一回事。

我想到的第一件事是：如果其中一个图像只是一个空白的透明图像，那不会将部分透明应用于另一个吗？因此它是一种代理background-opacity（它不存在但感觉它应该存在）。

我给它做了一个测试，看看它是否有效：

它似乎工作！这是它的肉：

<span style="background-color:#1b1b1b"><span style="color:#f5d67b"><code class="language-css"><span style="color:#f5d67b">.el</span> <span style="color:#72e0d1">{</span>
  <span style="color:#72e0d1">background-image</span><span style="color:#72e0d1">:</span> -webkit-cross-fade<span style="color:#72e0d1">(</span>
    <span style="color:#aa7ee1">url(image.jpg)</span><span style="color:#72e0d1">,</span>
    <span style="color:#aa7ee1">url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)</span><span style="color:#72e0d1">,</span>
    <span style="color:#fc9463">50</span>%
  <span style="color:#72e0d1">)</span><span style="color:#72e0d1">;</span></code></span></span>

这是一个1px 透明的 GIF Base64 编码的.

它在 Firefox 中不起作用，但在其他所有事物中都起作用。此外，您可以直接在 CSS 中测试支持，如果这不仅仅是增强功能，则可以做一些不同的事情。

<span style="background-color:#1b1b1b"><span style="color:#f5d67b"><code class="language-css"><span style="color:#83ba52">@supports <span style="color:#72e0d1">(</span><span style="color:#72e0d1">background</span><span style="color:#72e0d1">:</span> -webkit-cross-fade<span style="color:#72e0d1">(</span><span style="color:#aa7ee1">url()</span><span style="color:#72e0d1">,</span> <span style="color:#aa7ee1">url()</span><span style="color:#72e0d1">,</span> <span style="color:#fc9463">50</span>%<span style="color:#72e0d1">)</span><span style="color:#72e0d1">)</span></span> <span style="color:#72e0d1">{</span>

  <span style="color:#5e7671"><em>/* Only apply the idea if supported, do the Firefox fallback outside of this */</em></span>

<span style="color:#72e0d1">}</span></code></span></span>

这已经融入了上面的演示中。