我正在制作一个带有整页背景图像的网站。我想为侧栏创建一个背景图像，其作用类似于具有乘法作为混合模式的 Photoshop 图层。它只是一个具有 Photoshop 多层“行为”的蓝色表面。
无法合并叠加层和图像，因为以其他屏幕比例/尺寸打开网站时背景可能会发生变化。
SO 有很多解决方案，但它们仅适用于将 2 个具有固定位置的图像相乘，而不适用于具有可变位置/背景的彩色表面。
有什么技巧可以实现这一点吗？
jsBin 演示
Use the CSS3 property mix-blend-mode MDN Docs
(For fallback use an rgba or hsla color with a bit of alpha transparency.)
分配一个所需的blend-*为您的元素添加类，例如：
/* ::: BLEND MODE CLASSES */
.blend-normal{ mix-blend-mode: normal; }
.blend-multiply{ mix-blend-mode: multiply; }
.blend-screen{ mix-blend-mode: screen; }
.blend-overlay{ mix-blend-mode: overlay; }
.blend-darken{ mix-blend-mode: darken; }
.blend-lighten{ mix-blend-mode: lighten; }
.blend-colordodge{ mix-blend-mode: color-dodge; }
.blend-colorburn{ mix-blend-mode: color-burn; }
.blend-hardlight{ mix-blend-mode: hard-light; }
.blend-softlight{ mix-blend-mode: soft-light; }
.blend-difference{ mix-blend-mode: difference; }
.blend-exclusion{ mix-blend-mode: exclusion; }
.blend-hue{ mix-blend-mode: hue; }
.blend-saturation{ mix-blend-mode: saturation; }
.blend-color{ mix-blend-mode: color; }
.blend-luminosity{ mix-blend-mode: luminosity; }
/* ::: SET HERE YOUR INITIAL COLORS */
div{
background: rgba(0, 80, 200, 0.8);
color: #fff;
}
div span{
color:#000;
}
/* ::: FOR DEMO ONLY */
html, body{margin:0; height:100%;font:100%/1 sans-serif;}
body{background: url(https://i.stack.imgur.com/cBy6q.jpg)fixed 50%/cover;}
div{font-size:2.2em; padding:20px; margin:15px;}
div:first-of-type{margin-top:150px;}
div:last-of-type{margin-bottom:150px;}<div class="">(rgba) <span>(rgba)</span></div>
<div class="blend-normal">normal <span>normal</span></div>
<div class="blend-multiply">multiply <span>multiply</span></div>
<div class="blend-screen">screen <span>screen</span></div>
<div class="blend-overlay">overlay <span>overlay</span></div>
<div class="blend-darken">darken <span>darken</span></div>
<div class="blend-lighten">lighten <span>lighten</span></div>
<div class="blend-colordodge">color-dodge <span>color-dodge</span></div>
<div class="blend-colorburn">color-burn <span>color-burn</span></div>
<div class="blend-hardlight">hard-light <span>hard-light</span></div>
<div class="blend-softlight">soft-light <span>soft-light</span></div>
<div class="blend-difference">difference <span>difference</span></div>
<div class="blend-exclusion">exclusion <span>exclusion</span></div>
<div class="blend-hue">hue <span>hue</span></div>
<div class="blend-saturation">saturation <span>saturation</span></div>
<div class="blend-color">color <span>color</span></div>
<div class="blend-luminosity">luminosity <span>luminosity</span></div>