巧用CSS cross-fade()实现背景图像半透明效果 « 张鑫旭-鑫空间-鑫生活

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9489
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、需求描述

cross-fade背景图透明度降低

某元素，希望background-image背景图片是半透明的，但是，元素里面的其他内容，例如文字，图标之类的还是不透明。

如果是纯色背景或者是CSS渐变背景，很好处理，使用rgba或者hsla颜色色值即可。

但是，如果是url()背景图像，似乎就无能为力了。

如果是个内联的<img>图像那很好处理，无论是filter滤镜、mask遮罩还是opacity透明度设置都可以实现我们的效果，但是偏偏这里是背景图像，所有前面提到的这些方法都会影响文字的正常显示。

我估计很多人会想到使用::before/::after伪元素实现，例如：

.box {
   position: relative;
   z-index: 0;
}
.box::before {
   content: '';
   position: absolute;
   left: 0; right: 0; top: 0; bottom: 0;
   background: url(xxx.jpg) no-repeat center / contain;
   z-index: -1;
   opacity: .5;
}

实时效果如下（如果没有效果请访问原文作者张鑫旭）：

by-zhangxinxu

但是这个方法太啰嗦，成本太高（创建了大量的层叠上下文、尺寸是不是需要调整），无法大规模使用。

有没有什么好的实现方法呢？

试试使用cross-fade()图像函数。

二、cross-fade()实现背景图像半透明

cross-fade()函数可以让两张图像半透明混合。

例如：

<div class="cross-fade-image"></div>

.cross-fade-image {
    width: 300px; height: 300px;
    background: no-repeat center / contain;
    background-image: -webkit-cross-fade(url(1.jpg), url(2.jpg), 50%);
    background-image: cross-fade(url(1.jpg), url(2.jpg), 50%);   
}

就会有下图所示的效果。

2.jpg这张图以50%的透明度和1.jpg进行了混合渲染。

上面案例使用的是cross-fade()函数的传统语法，具体如下：

<image-combination> = cross-fade( <image>, <image>, <percentage> )

其中<percentage>指的是透明度，只会改变第2个图像的透明度，最终的效果是第1个图像完全不透明和第2个图像半透明叠加的效果。

关于cross-fade()图像函数中的百分比值改变的仅仅是后面一个图像的透明度，我很久以前做过一个demo页面进行过测试，您可以狠狠地点击这里：CSS3 cross-fade属性透明度作用对象测试

示意截图如下：

cross-fade与opacity作用对比效果测试

虽然cross-fade()函数设计的初衷是多个图像半透明叠加，但是，这样的场景实际开发很少遇到，因此，cross-fade()反而更适合控制单个背景图像的半透明效果。

实现原理很简单，第1张图使用透明图片，第2张图使用目标图片就可以了。

举个例子：

某背景图在黑暗模式下太亮了，希望调整下背景图的明暗度，使用cross-fade()函数实现就是下面这段CSS代码（宽高设置的CSS略）：

.dark {
    /* 兜底，IE和Firefox浏览器 */
    background-image: url(2.jpg);
    --transparent: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
    /* Safari最近版本已经不需要私有前缀了 */
    background-image: cross-fade(var(--transparent), url(2.jpg), 40%);
    /* 如使用自定义属性，-webkit-语句需要放在没有私有前缀语句的下面 */
    background-image: -webkit-cross-fade(var(--transparent), url(2.jpg), 40%);

    background-size: cover;
}

效果如下：