css3背景图片(background-image)透明度设置方案总结

希望某个的背景图透明，怎么弄？

如果是纯色背景，使用8位hex、rgba或者hsla颜色色值即可。比如 background-color: rgba(0, 0, 0, .6); 最后一个值就是控制透明度的。

css 使用rgb颜色比使用hex颜色个人感觉更加直观——虽然hex相比rgb css文件体积变大，其是也大不了多少的

传统实现背景图透明方案

这里可以参考张鑫旭的文章：《巧用CSS cross-fade()实现背景图像半透明效果》

.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;
}

其是这个合加水印一样，如果是z-index >0。那么需要设置： pointer-events: none;

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

张鑫旭老师的文章是使用两张图片。但是，如果你使用一张图片，第二张用 渐变取代图片（当然也是base64编码 的空白图片）。也是可以实现半透效果的。

具体代码如下：

.demo {
  background-image: -webkit-cross-fade(url(//www.zhoulujun.cn/uploadfile/images/2017/0914/20170914110147781171121.jpg),
  linear-gradient(rgba(255,255,255,1), rgba(255,255,255,1)), 0.5);
}

为什么可以实现呢？

cross-fade

先看文档：https://developer.mozilla.org/en-US/docs/Web/CSS/cross-fade

cross-fade() 函数将图像的列表以百分比限定多少各图像的被保持在不透明度方面当它与其它图像混合。

cross-fade( url(white.png) 0%,   url(black.png)); / *全黑* /
cross-fade( url(white.png) 25%,  url(black.png)); / * 25％白色，75％黑色* /
cross-fade( url(white.png),      url(black.png)); / * 50％白色，50％黑色* /
cross-fade( url(white.png) 75%,  url(black.png)); / * 75％白色，25％黑色* /
cross-fade( url(white.png) 100%, url(black.png)); / *全白* /
cross-fade( url(green.png) 75%, url(red.png) 75%); / *绿色和红色均为75％* /

这个方法其实还行。穿透没有background-blend-mode 这么严重。

background-blend-mode实现背景图像半透明

这个张鑫旭老师也写过：《深入理解CSS background-blend-mode的作用机制》

blend-mode 也没有啥好讲的，看文档足以：https://developer.mozilla.org/zh-CN/docs/Web/CSS/blend-mode

这个一般用来做文字适配背景色，其是也可以来做背景半透效果的。下面是demo案例：

如果是黑底，

.d2{
    background-color: rgba(0, 0, 0, .6);
    background-blend-mode: multiply;
    background-image: url(//www.zhoulujun.cn/uploadfile/images/2017/0914/20170914110147781171121.jpg);
    background-size: cover;
    background-position: center center;
  }

如果是白底

.d2{
    background-color: rgba(255, 255, 255, .6);
    background-blend-mode: lighten;
    background-image: url(//www.zhoulujun.cn/uploadfile/images/2017/0914/20170914110147781171121.jpg);
    background-size: cover;
    background-position: center center;
  }

反正就是跟元素的背景进行混合。

参考文章：

巧用CSS cross-fade()实现背景图像半透明效果 https://www.zhangxinxu.com/wordpress/2020/07/css-cross-fade-background-image-opacity/

深入理解CSS background-blend-mode的作用机制 https://www.zhangxinxu.com/wordpress/2020/07/css-background-blend-mode/

cross-fade https://runebook.dev/zh/docs/css/cross-fade()

转载本站文章《css3背景图片(background-image)透明度设置方案总结》,
请注明出处：https://www.zhoulujun.cn/html/webfront/style/css3/2023_0927_8984.html