背景混合模式 background-blend-mode 演示
本帖最后由 马黑黑 于 2024-1-17 08:33 编辑 <br /><br /><style>.pa {font: normal 20px/26px sans-serif; }
.pa p { margin: 10px 0; }
.pa pre { padding: 10px; background: #eee; color: navy; font-size: 16px; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; }
.pa mark { background: lightblue; padding: 2px 6px; }
.sBox { margin: 10px auto; width: 600px; position: relative; }
#mydiv { height: 338px; border: 1px solid gray; background: linear-gradient(red,green,blue), url('https://638183.freep.cn/638183/t24/jpg/dysonstar.jpg') no-repeat center/cover; background-blend-mode: normal; }
.sBox { display: flex; gap: 6px 4px; flex-direction: row; flex-wrap: wrap; }
.sBox > button { width: 145px; }
.sBox > output { color: red; }
.zs { color: green; }
</style>
<div class="pa">
<h3>背景混合模式 background-blend-mode 演示</h3>
<p>下面的两个盒子，第一个只是一张图片，第二个是演示盒子。在演示盒子里，图片已经当做背景图片使用但是此刻看不到它，只看到红绿蓝线性渐变背景，原因是演示盒子使用了两个背景层，渐变背景层+图片背景层。我们知道，多层相同尺寸的背景存在相互覆盖的现象，通过background或background-image属性添加的背景层只显示最顶层背景层（即代码流中第一出现的背景层，但颜色是顶层是除外——它属于备用）。要改变这种状态，我们可以使用背景混合模式即 background-blend-mode 来实现，可通过演示盒子下方的交互按钮逐一体验各种背景混合模式的效果：</p>
<div class="sBox"><img src="https://638183.freep.cn/638183/t24/jpg/dysonstar.jpg" alt="" /></div>
<div id="mydiv" class="sBox"></div>
<div class="sBox">background-blend-mode: <output id="modeMsg">normal</output>;</div>
<div id="btnsdiv" class="sBox"></div>
<h3>【附】</h3>
<h3>（一）CSS双层背景层的设置举例（多层同理）</h3>
<pre>
background: #00ffff url('图片'); <span class="zs">/* 颜色+图片 → 显示图片，颜色备用但会作用于 background-blend-mode 效果 */</span>
background: linear-gradient(red,green), url('图片'); <span class="zs">/* 渐变+图片 → 显示渐变 */</span>
background: url('图片'), linear-gradient(red,green); <span class="zs">/* 图片+渐变 → 显示图片 */</span>
background: url('图片一'), url('图片二'); <span class="zs">/* 图片+图片 → 显示图片一 */</span>
</pre>
<h3>（二）CSS的 background-blend-mode 设置举例</h3>
<p>双背景层的情况下，background-blend-mode 将第二个出现的背景层混合到第一个背景层，第二个背景层的颜色体系与第一层背景通过特殊的乘积运算共同营造出我们一般难以预测得到的效果，换言之，background-blend-mode 背景混合模式并不直接作用于第一背景层，而是针对但并不是简单针对第二个背景层。如果有更多的背景层，则第三个背景层通过特殊算法与第一、第二背景层所形成的结果再进行乘积运算得出最终结果，第N层依此类推。举例如下：</p>
<pre>
<span class="zs">/* 双层背景 : 作用于图片 */</span>
background: black url('图片');
background-blend-mode: hue;
<span class="zs">/* 三层背景 : 作用于图二、图三 */</span>
background: url('图片一'), url('图片二'), url('图片三');
background-blend-mode: hue, screen;
</pre>
<h3>（三）16种 blend-mode 值及其解释</h3>
<p><mark>normal</mark>： 正常模式（默认），没有混合</p>
<p><mark>multiply</mark> ：正片叠加，基色和目标色复合后替换目标色。合成色至少与基色或目标色一样深。任何颜色与黑色复合得到黑色。任何颜色与白色复合保持初始颜色。</p>
<p><mark>screen</mark> ：滤色，把背景色的互补色与基色混合，取结果的互补色。合成色至少和两个构成色一样浅。任何颜色与白色滤色产生白色；和黑色滤色颜色不变。效果类似于在一个屏幕上投影多个幻灯片。</p>
<p><mark>overlay</mark> ：叠加，对颜色正片叠底或滤色依赖于背景色值。基色覆盖背景同时保留高光和阴影。背景色没有被替换但是与基色混合来反映背景的亮暗。</p>
<p><mark>darken</mark> ：变暗，选择背景和基色的较暗部分。背景被基色中较暗的部分替换；否则，保持不变。</p>
<p><mark>lighten</mark> ：变亮，选择背景和基色中较亮的部分。背景被基色中较亮的部分替换；否则，保持不变。</p>
<p><mark>color-dodge</mark> ：颜色咸淡，减淡背景色来反映基色。黑色绘制的部分不变。</p>
<p><mark>color-burn</mark> ：颜色加深，加深背景色来反映基色。白色绘制的部分不变。</p>
<p><mark>hard-light</mark> ：强光，对颜色正片叠底或滤色依赖于基色值。效果类似于在背景上用强聚光灯照射。</p>
<p><mark>soft-light</mark> ：柔光，使颜色变暗或变亮，取决于基色值。效果类似于在背景上用发散的聚光灯照射。</p>
<p><mark>difference</mark> ：差值，从较浅的颜色中减去两个组成颜色的较深部分。白色绘制的部分背景反色；黑色绘制的部分不变。</p>
<p><mark>exclusion</mark> ：排除，产生类似于差值模式的效果但是对比度更低。白色绘制的部分背景反色；黑色绘制的部分不变。</p>
<p><mark>hue</mark> ：色相，创建于基色的色相、饱和度和亮度相同的颜色。</p>
<p><mark>color</mark> ：颜色，创建色相和量度和基色相同，饱和度和背景色相同的颜色。保持背景的灰度并且对于给单色图片或图片着色很有用。</p>
<p><mark>saturation</mark> ：创建饱和度与基色相同，色相和亮度与背景色相同的颜色。在背景是纯灰（没有饱和度）的区域使用这个模式不产生改变。</p>
<p><mark>luminosity</mark> ：光亮或亮度，创建亮度和基色相同，色相和饱和度与背景色相同的颜色。这个模式产生的效果和Color模式相反。你可以用这个模式创建和许多网页头部图片效果一样的单色图片效果。</p>
<h3>（四）mix-blend-mode 元素混合模式</h3>
<p>mix-blend-mode 是元素混合模式，blend-mode 值与前述的背景混合模式完全一样。不同的是，mix-blend-mode 模式直接作用于元素，将使用了 mix-blend-mode 模式的颜色体系与其下层的颜色体系进行乘积运算得出最终混合结果。试看代码示例：</p>
<p>除开以上 16 种模式，还有<mark>initial</mark>初始、<mark>inherit</mark>继承和<mark>unset</mark>复原三种模式，它们不同于上述 16 中模式，一般不会独立出现，通常都依据上下文决定使用与否。</p>
<pre>
video {
mix-blend-mode: screen;
}
</pre>
<p>这将迫使页面中的所在视频（video标签）以滤色模式（screen）和其底层综合呈现出来的颜色体系进行运算，比如，纯黑色的视频背景会被去掉。</p>
</div>
<script>
let lastBtn = 0;
let blend_modes = [ ['normal','正常'],['multiply','正片叠底'],['screen','滤色'],['overlay','叠加'],['darken','变暗'],['lighten','变亮'],['color-dodge','颜色减淡'],['color-burn','颜色加深'],['hard-light','强光'],['soft-light','柔光'],['difference','差值'],['exclusion','排除'],['hue','色相'],['saturation','饱和度'],['color','颜色'],['luminosity','亮度'] ];
let modeNow = (val) => {
mydiv.style.backgroundBlendMode = val;
modeMsg.textContent = val;
};
blend_modes.forEach((item,key) => {
let btn = document.createElement('button');
btn.value = item;
btn.textContent = item.join(' ');
btn.onclick = () => modeNow(item);
btnsdiv.appendChild(btn);
});
</script>
【附】相关文章
CSS混合模式mix-blend-mode滤镜 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com) 复习帖{:5_106:}
https://5b0988e595225.cdn.sohucs.com/images/20190419/7da50d3dcce94a0781bd06220ef63dc4.gif
吃瓜人来也{:4_334:} 起个网名好难 发表于 2024-1-17 08:55
复习帖
温故知新 樵歌 发表于 2024-1-17 11:05
吃瓜人来也
瓜有的是 醉美水芙蓉 发表于 2024-1-17 11:37
谢谢老师更加详细的讲解！
主要是这个有演示，可以直接查看效果 马黑黑 发表于 2024-1-17 11:47
主要是这个有演示，可以直接查看效果
是的，这个太好了。对这16中混合方式的效果本来就不是最清楚，这样直接看到效果，真是太好了{:4_199:} 背景混合、颜色混合，之前对这两个也很模糊，放一起讲解真的太好了{:4_199:} 这个帖子真的太好了，又想置顶了，又怕置顶的东东太多。算了，我自己收藏了，能让自己很方便地找到就好{:4_173:} background: url('图片一'), url('图片二'); /* 图片+图片 → 显示图片一 */
这个之前也不知道。习惯了html里后加的图图更前面，这个正好是反的呢{:4_173:} 这个帖子我必须好好地学习学习再学习，真的太好了{:4_199:} 红影 发表于 2024-1-17 16:15
这个帖子我必须好好地学习学习再学习，真的太好了
记住16个属性值其实简单，但是领会它们的含义需要花点功夫 红影 发表于 2024-1-17 16:08
是的，这个太好了。对这16中混合方式的效果本来就不是最清楚，这样直接看到效果，真是太好了
效果不是固定的，因为都是下层颜色和上层颜色的乘积运算，如文中所说，常人一般很难预测最终效果。不过可以从道理上有一个大概的感知，并通过尝试找到合适的属性值。 红影 发表于 2024-1-17 16:15
background: url('图片一'), url('图片二'); /* 图片+图片 → 显示图片一 */
这个之前也不知道。习惯了htm ...
这是背景图设置，不是在页面上加 img 标签。CSS支持一个元素多个背景，如果所有的背景尺寸设置相同，则只有第一个会呈现，第一个是顶层背景。
一般来说，元素设置多背景图片时，可以让图片按不同的尺寸和位置出现，或令图片有透明区域，这样图片就可以都显示出来。而 background-blend-mode 属性，它做的工作实际上是将非顶层的背景图混合到顶层，且不同的属性值有不同的混合方法。 马黑黑 发表于 2024-1-17 17:57
记住16个属性值其实简单，但是领会它们的含义需要花点功夫
是啊，总是无法准确感觉到混合后的效果。 马黑黑 发表于 2024-1-17 17:59
效果不是固定的，因为都是下层颜色和上层颜色的乘积运算，如文中所说，常人一般很难预测最终效果。不过可 ...
我有时为了找个好效果，差不多一个个试呢，太累人了。 红影 发表于 2024-1-17 19:38
我有时为了找个好效果，差不多一个个试呢，太累人了。
这也是基本做法。不同的是，懂原理的，他不是试完全部 马黑黑 发表于 2024-1-17 18:04
这是背景图设置，不是在页面上加 img 标签。CSS支持一个元素多个背景，如果所有的背景尺寸设置相同，则只 ...
是的，这样呈现出来的就是被混合计算过的仿佛一张图图的样子了。这个效果真好呢{:4_187:}