第十九讲：颜色融合模式 *-blend-mode 和多背景图像的处理
一、CSS颜色的融合模式
web页中存在多种形态的重叠现象，最常见的是元素间的重叠和背景重叠。重叠会导致底层的东东被上层的东东所覆盖，除非刻意这么做，我们一般都不希望如此，我们想让一切都能顺利渲染出来——即便彼此间是重叠的。避免覆盖所造成的遮挡，我们需要一些特殊的技术，我们现在要讲的颜色融合模式就是解决问题的技术之一。
*-blend-mode融合模式共两种，第一种是 mix-blend-mode。mix-blend-mode是一个CSS属性，用于决定当元素重叠时如何呈现各自的颜色，共有十多种方式供我们选择：
normal： 正常模式（默认），没有混合
multiply ：正片叠加，基色和目标色复合后替换目标色。合成色至少与基色或目标色一样深。任何颜色与黑色复合得到黑色。任何颜色与白色复合保持初始颜色。
screen ：滤色，把背景色的互补色与基色混合，取结果的互补色。合成色至少和两个构成色一样浅。任何颜色与白色滤色产生白色；和黑色滤色颜色不变。效果类似于在一个屏幕上投影多个幻灯片。
overlay ：叠加，对颜色正片叠底或滤色依赖于背景色值。基色覆盖背景同时保留高光和阴影。背景色没有被替换但是与基色混合来反映背景的亮暗。
darken ：变暗，选择背景和基色的较暗部分。背景被基色中较暗的部分替换；否则，保持不变。
lighten ：变亮，选择背景和基色中较亮的部分。背景被基色中较亮的部分替换；否则，保持不变。
color-dodge ：颜色咸淡，减淡背景色来反映基色。黑色绘制的部分不变。
color-burn ：颜色加深，加深背景色来反映基色。白色绘制的部分不变。
hard-light ：强光，对颜色正片叠底或滤色依赖于基色值。效果类似于在背景上用强聚光灯照射。
soft-light ：柔光，使颜色变暗或变亮，取决于基色值。效果类似于在背景上用发散的聚光灯照射。
difference ：差值，从较浅的颜色中减去两个组成颜色的较深部分。白色绘制的部分背景反色；黑色绘制的部分不变。
exclusion ：排除，产生类似于差值模式的效果但是对比度更低。白色绘制的部分背景反色；黑色绘制的部分不变。
hue ：色相，创建于基色的色相、饱和度和亮度相同的颜色。
color ：颜色，创建色相和量度和基色相同，饱和度和背景色相同的颜色。保持背景的灰度并且对于给单色图片或图片着色很有用。
saturation ：创建饱和度与基色相同，色相和亮度与背景色相同的颜色。在背景是纯灰（没有饱和度）的区域使用这个模式不产生改变。
luminosity ：光亮或亮度，创建亮度和基色相同，色相和饱和度与背景色相同的颜色。这个模式产生的效果和Color模式相反。你可以用这个模式创建和许多网页头部图片效果一样的单色图片效果。
下面是两张图片，我们将使用它们来做演示：
现在，我们用盒子即元素的背景加载第一张图片，第二张图片用img标签作为盒子的子元素加载并覆盖在父元素之上：
<style>
.bbox1 {
margin: auto;
width: 800px;
height: 460px;
background: url('https://638183.freep.cn/638183/t22/51/g4.jpg') no-repeat center/cover;
position: relative; /* 父元素相对定位 */
}
.mypic {
position: absolute; /* 子元素绝对定位 + 以下的100%宽高可确保子元素覆盖父元素 */
width: 100%;
height: 100%;
mix-blend-mode: darken; /* 使用混合滤镜令元素以 darken 方式呈现 */
}
</style>
<div class="bbox1">
<img class="mypic" src="https://638183.freep.cn/638183/t22/51/g3.jpg" alt="" />
</div>
融合效果可能不令人满意，比如菇凉的草帽不见了，菇凉身子的中段和海水过度融合了，但这是一个实现思路，且当图像的颜色配套，我们选用一个合适的 blend-mode 值可以达到理想的融合效果。
第二种融合模式是背景融合，background-blend-mode，该模式允许重叠的诸多背景以选定的方式进行融合从而达到多个背景混合成最终的样式。mix-blend-mode 指向单一的元素，令使用了该属性的元素和其下层的颜色融合，而 background-blend-mode 则是指向同一元素下的多个 background 背景图像。以下演示依然使用上面的两张图片，我们给盒子加载这两张背景图再加上一个颜色，酱紫盒子的图层共三个，然后使用 background-blend-mode 对之进行融合处理：
<style>
.bbox2 {
margin: auto;
width: 800px;
height: 460px;
/* 下面设置两张背景图外加一个颜色 */
background:
url('https://638183.freep.cn/638183/t22/51/g3.jpg') no-repeat center/cover,
url('https://638183.freep.cn/638183/t22/51/g4.jpg') no-repeat center/cover,
olive;
background-blend-mode: darken, lighten; /*背景融合滤镜 ：darken作用于第一张图片，lighten作用于第二张图片 */
}
</style>
<div class="bbox2"></div>
效果和前面的背景+img元素的演示不尽相同，原因是我们在两张图片的基础上加了一个颜色，两张图片各自使用了融合滤镜，致使它们某些区域存在一定的透明度，背景颜色因此可以渗透到整体颜色呈现机制。我们可以看到，多背景图层修饰的元素通过 background-blend-mode 滤镜的处理，所有的图层均能呈现出来，但图层都不是独立呈现，而是交融在了一起。这里提示一下，选用什么滤镜值是一件复杂的工作，一般都是根据图样和滤镜原理进行分析决定采用什么率精致，然后多做尝试。
二、元素多背景图像的处理
上个演示实例其实已经给出了多重图片、颜色做背景的解决方案，不过盒子的多重背景设置不止于此，所以还要单独讲讲。
使用 background-* 属性设置背景内容丰富，我们常用到的有：① background-color，背景颜色； ② background-image，背景图片；③ background-repeat，背景图片重复与否；④ background-position，背景图片的位置，分XY轴两个方向值；⑤ background-size，背景图片呈现的尺寸；⑥ background-blend-mode，前面讲的背景图片的融合方式。此外，background 属性是一个集合属性，它以语法糖的形式将多个属性集中在一块儿写，可以带颜色、背景图片以及背景图片的重复方式、位置和背景大小。以下是盒子多背景设置方法举例：
/* CSS代码 ：盒子多背景设置举例 */
background-color: rgb(128,128,0); /* 背景颜色 */
background-image: url('图片地址1'), url('图片地址2'); /* 背景图片 ：两张 */
background-repeat: no-repeat, repeatX; /* 背景重复 ：第一张不重复，第二张X轴方向重复 */
background-position: 0 0, 50% 50%; /* 背景位置 ：第一张从左上角开始，第二张居中 */
background-size: cover, 100% 100%; /* 背景尺寸 ：第一张以封面样式伸缩，第二张按盒子尺寸伸缩 */
/* 以上代码等价于如下语法糖格式 */
background:
url('图片地址1') no-repeat 0 0/cover,
url('图片地址2') repeatX center/cover，
rgb(128,128,0);
/* 多张图片做背景时如果有重叠，则只显示最第一张图片背景 */
/* 所以应考虑使用什么方法解决问题，比如使用背景融合滤镜 */
background-blend-mode: 值1, 值2; /* 值1针对第一张图片，值2针对第二张图片 */
但这只是代码的写法，真正设置多背景图是要充分考虑重叠时是否需要进行处理。如果一张大图背景之上布置几个小图背景，若背景小图的背景是透明的，我们可以不用处理什么，设置好尺寸和位置即可；但若不是，就需要使用相应的办法来消除小图的背景色或将之自然融合到主背景中，可选方法不外乎背景融合滤镜 background-blend-mode、遮罩滤镜 -webkit-mask、透明度 opacity 或 filter: opacity(num) 等等这些。这是一个重度依赖经验的技术活，多尝试才会得心应手。
作业：使用一大一小的图片做盒子的背景图，大图片铺满整个元素，小图片repeat与否自行决定，再辅以一个带透明度的颜色加入背景图层中以改善最终的颜色合成效果，要求作品看上去自然得体。【提示】.svg、.gif 和 .webp 等格式的图片可以是动态图片，这意味着，元素的背景图片是可以动的，大家可以一试。
返回目录
楼主: 马黑黑
楼主
显身卡
发表于 2024-8-7 21:09
发表于 2024-8-8 21:21