背景与背景图片的相互融合

马黑黑

CSS融合技术里除了有 mix-blend-mode 系列混合滤镜（用于融合元素与元素），还有背景融合滤镜 background-blend-mode 系列滤镜（用于融合背景，不与其上的元素融合），和前者一样，也有 16 种滤镜效果。我们后面的演示需要设定一个CSS类选择器 .bgBox :

.bgBox {
   margin: 10px auto 0;
   width: 500px;
   height: 300px;
   padding: 10px;
   position: relative;
   background: red url('/data/attachment/forum/202201/29/223322rnkonc43jlnsb44m.jpg') no-repeat center/cover;
}

上面的CSS，我们给 bgBox 类选择器设定了盒子的背景色和背景图片，我们的意图是想通过下面的HTML代码实现背景色与背景图片的融合：

<div class="bgBox" style="background-blend-mode: darken;">No.5 darken</div>

我们要写 16 行这样的HTML代码，以便观察不同滤镜下元素背景色与元素背景图片的融合效果。顺便提一下，很重要的：一是不同的背景色与图片融合的效果不尽一样；二是背景融合支持多种滤镜混合使用，方便时可以试试；三是元素的背景支持多个背景图片，这意味着多个背景图片之间也可以相互融合并且可以混合应用多种滤镜。

效果将在下楼展示，我用JS来生成HTML代码，它生成的代码是酱紫：

<div class="bgBox" style="background-blend-mode: normal;">No.1 normal</div>
<div class="bgBox" style="background-blend-mode: multiply;">No.2 multiply</div>
<div class="bgBox" style="background-blend-mode: screen;">No.3 screen</div>
<div class="bgBox" style="background-blend-mode: overlay;">No.4 overlay</div>
<div class="bgBox" style="background-blend-mode: darken;">No.5 darken</div>
<div class="bgBox" style="background-blend-mode: lighten;">No.6 lighten</div>
<div class="bgBox" style="background-blend-mode: color-dodge;">No.7 color-dodge</div>
<div class="bgBox" style="background-blend-mode: color-burn;">No.8 color-burn</div>
<div class="bgBox" style="background-blend-mode: hard-light;">No.9 hard-light</div>
<div class="bgBox" style="background-blend-mode: soft-light;">No.10 soft-light</div>
<div class="bgBox" style="background-blend-mode: difference;">No.11 difference</div>
<div class="bgBox" style="background-blend-mode: exclusion;">No.12 exclusion</div>
<div class="bgBox" style="background-blend-mode: hue;">No.13 hue</div>
<div class="bgBox" style="background-blend-mode: saturation;">No.14 saturation</div>
<div class="bgBox" style="background-blend-mode: color;">No.15 color</div>
<div class="bgBox" style="background-blend-mode: luminosity;">No.16 luminosity</div>

马黑黑

background-blend-mode 16种滤镜：背景色与背景图片的融合效果：

马黑黑

二楼代码：

1. <style>
   
2. <style>
   
3. .mama { width: 100%; }
   
4. .bgBox {
   
5.         margin: 10px auto 0;
   
6.         width: 500px;
   
7.         height: 300px;
   
8.         padding: 10px;
   
9.         position: relative;
   
10.         background: orange url('/data/attachment/forum/202201/29/223322rnkonc43jlnsb44m.jpg') no-repeat center/cover;
    
11. }
    
12. </style>
    
13. 
    
14. <div class="mama"><p>background-blend-mode 16种滤镜：背景色与背景图片的融合效果：<br></div>
    
15. 
    
16. <script>
    
17. let mixarr = ['normal','multiply','screen','overlay','darken','lighten','color-dodge','color-burn','hard-light','soft-light','difference','exclusion','hue','saturation','color','luminosity'];
    
18. let hstr = '';
    
19. for(j=0; j<mixarr.length; j++){
    
20.         hstr += `<div class="bgBox" style="background-blend-mode: ${mixarr[j]};">No.${j+1} ${mixarr[j]}</div>\n`;
    
21. }
    
22. document.querySelector('.mama').innerHTML += hstr;
    
23. console.log(hstr);
    
24. </script>

复制代码

加林森

又学习到了新的融合方法了，谢谢老黑。

马黑黑

加林森 发表于 2022-4-11 20:52
又学习到了新的融合方法了，谢谢老黑。

是不是有点快

加林森

马黑黑 发表于 2022-4-11 20:56
是不是有点快

对你来说不快的，你是举一反三。我呢，得慢慢学习的。

马黑黑

加林森 发表于 2022-4-11 20:58
对你来说不快的，你是举一反三。我呢，得慢慢学习的。

最主要的吧，还是基础问题。比如说前景色，是哪一个设定，你若不懂，你就无法做更深入的探究

加林森

马黑黑 发表于 2022-4-11 20:59
最主要的吧，还是基础问题。比如说前景色，是哪一个设定，你若不懂，你就无法做更深入的探究

就是这个道理的。我不太懂，只有跟着你学习了。

马黑黑

加林森 发表于 2022-4-11 21:02
就是这个道理的。我不太懂，只有跟着你学习了。

我介绍的，不是基础知识，有点为难你了

加林森

马黑黑 发表于 2022-4-11 21:03
我介绍的，不是基础知识，有点为难你了

我不急的，慢慢来吧。

朵拉

马老师深入探究的话，PS弱爆了

马黑黑

朵拉 发表于 2022-4-11 21:25
马老师深入探究的话，PS弱爆了

不会呀，ps太专业，CSS的一点点滤镜只不过是小儿科

马黑黑

加林森 发表于 2022-4-11 21:10
我不急的，慢慢来吧。

挺好

加林森

马黑黑 发表于 2022-4-12 07:43
挺好

嗯嗯