使用CSS的cross-fade()实现背景图片半透明效果

2020年07月17日 前端开发 45点热度 0人点赞 0条评论

有时候在做项目的时候想要把背景图片 background-image 设置为半透明的状态,但是元素里面的其他内容,例如文字,图标之类的还是不透明的。遇到这样的情况如果背景是纯色或者是CSS渐变的话还是比较好处理的,使用 rgba 或者 hsla 颜色色值即可。如果是url()背景图片,我们来介绍一个CSS属性,cross-fade(),看看利用cross-fade()怎么实现背景图片的半透明效果。

一、不使用cross-fade()怎处理半透明背景

如果是个内联的 <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;
}

半透明的效果我们是实现了,但是这个方法代码量比较多,成本太高(创建了大量的层叠上下文、尺寸是不是需要调整),无法大规模使用。

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

下面我们来试试使用cross-fade()图像函数。

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

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

例如:

<div class="cross-fade-image"></div>
<style>
.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%);   
}
</style>

就会有下图所示的效果。

cross-fade()实现背景图片半透明效果

cross-fade()实现背景图片半透明效果

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

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

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

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

虽然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;
}

效果如下:

cross-fade()单张背景图片半透明效果

cross-fade()单张背景图片半透明效果

是不是很简单,是不是比伪元素实现要靠谱的多,对应的demo访问这里。

cross-fade()本质上就是个<image>图像数据类型,和url()图像,gradient渐变图像,image-set()函数是一个性质,可以用在border-image, mask-image等属性中。

因此,使用cross-fade()函数替换url()函数实现背景图片的半透明效果决定是成本最低,效果最好的方法。

三、cross-fade()移动端兼容性极佳

cross-fade()函数webkit浏览器支持的非常早,iOS 5,Android 4.4均支持,只不过需要设置私有前缀,具体如下图所示:

cross-fade()兼容性

cross-fade()兼容性

cross-fade()兼容性

因此,在移动端可以放心使用,至于PC端,不需要考虑IE浏览器的项目也是可以放心使用的,就算需要考虑IE也没毛病,不过就是背景图还是完全不透明而已,视觉体验稍微低了一点而已。

这世界上没有所谓的没有用的CSS属性,只是没有遇到合适的场景而已;就像依然单身的诸位,只是还没有遇到合适的那个他/她而已。

另外,cross-fade()函数加入CSS规范后有了新的语法,更灵活更强大,但是目前没有任何浏览器支持,因此本文没有做相关介绍。

标签:

Kratos

保持饥渴的专注,追求最佳的品质

文章评论