也許有點寬鬆？

Jake的文章《目前无法交叉淡化任何两个DOM元素》深入探讨了无法真正交叉淡化元素的原因，这篇文章非常精彩。虽然可以对两个元素的不透明度进行动画处理，但这并非真正的交叉淡化效果。事实证明，Chrome/WebKit独有的CSS函数-webkit-cross-fade()可以实现此效果。MDN文档提到该函数已规范化，但不同实现版本之间存在差异，因此略显混乱……但它确实存在：

.el {
  background: -webkit-cross-fade(url(img1.svg), url(img2.svg), 50%);
}

我甚至不知道有这个功能。

我首先想到的是：如果其中一张图片是透明的空白图片，是否会对另一张图片应用部分透明度？因此，它可以作为background-opacity的替代方案（background-opacity并不存在，但感觉应该存在）。

我进行了一个测试，看看它是否有效：

测试结果有效！ 核心代码如下：

.el {
  background-image: -webkit-cross-fade(
    url(image.jpg),
    url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7),
    50%
  );
}

这是一个Base64编码的1像素透明GIF图片。

该方法在Firefox中无效，但在其他浏览器中有效。此外，可以在CSS中直接测试浏览器支持情况，并在不支持时使用不同的方法。

@supports (background: -webkit-cross-fade(url(), url(), 50%)) {
  /* 仅在支持时应用此方法，Firefox的备选方案在此之外 */
}

上述代码已包含在演示中。

以上是也許有點寬鬆？的詳細內容。更多資訊請關注PHP中文網其他相關文章！