【前端技巧】CSS常用知识碎片（八）

CSS常用知识碎片（八）

CSS混合模式

background-blend-mode 属性用于混合元素背景图案、渐变和颜色；
mix-blend-mode 属性用于元素与元素之间的混合；
isolation 属性用在祖先元素上，限制mix-blend-mode 属性设置的混合模式的应用范围。

mix-blend-mode:multiply

值multiply的混合效果是正片叠底，最终效果表现的色值的计算公式是：C = A * B / 255

mix-blend-mode:screen

值screen的混合效果是滤色，最终效果的色值的计算公式是：C = 255 - (255 - A)(255 - B) / 255

mix-blend-mode:overlay

值overlay的混合效果是叠加，最终效果的色值的计算公式是：
- 当A <= 128 时：C = A * B / 128
- 当A > 128 时：C = 255 - (255 - A)(255 - B) / 128
利用叠加实现文字水印

<body>
<h4>文字水印</h4>
<div class="box"><img src="/images/test.jpg" width="256">
</div>
</body>
<style>
.box {position: relative;
}
.box::before {content: "水印文字";position: absolute;mix-blend-mode: overlay;text-shadow: 10ch 2em, -10ch 2em, 10ch -2em, -10ch -2em, 0 -5em, 0 5em;transform: rotate(-30deg);left: calc(50% - 5ch); top: 90px;
}
</style>

利用叠加实现文字高亮

<body>
<h4>颜色叠加（适合浅色）</h4>
<p><input type="search" placeholder="输入内容回车搜索"></p>
<p id="target">可以在上面的输入框中输入任意这段内容中出现的文字或者单词，在输入内容并按回车键确认后，就会看到文字有高亮显示效果。但是，这种高亮显示效果不是通过包裹标签元素实现的，而是将色块直接覆盖在文字上面，然后通过叠加这种混合模式实现的。</p>
</body>
<script>
var eleSearch = document.querySelector('input[type="search"]');
var eleTraget = document.querySelector('#target');eleSearch.addEventListener('input', function () {var text = eleTraget.textContent;[].slice.call(document.querySelectorAll('ui-overlay')).forEach(function (overlay) {overlay.remove();});// 匹配处理var value = this.value.trim();var length = value.length;if (!length) {return;}var arrMatchs = text.split(value);if (arrMatchs.length > 1) {var start = 0;arrMatchs.forEach(function (parts, index) {if (index == arrMatchs.length - 1) {return;}var range = document.createRange();start += parts.length;range.setStart(eleTraget.firstChild, start);range.setEnd(eleTraget.firstChild, start + length);var bound = range.getBoundingClientRect();var eleOverlay = document.createElement('ui-overlay');document.body.appendChild(eleOverlay);eleOverlay.style.left = bound.left + 'px';eleOverlay.style.top = (bound.top + window.pageYOffset) + 'px';eleOverlay.style.width = bound.width + 'px';eleOverlay.style.height = bound.height + 'px';start += length;});}
});
</script>
<style>
ui-overlay {position: absolute;background: red;mix-blend-mode: overlay;z-index: 9;
}p {color: gray;
}
</style>

mix-blend-mode:darken

值darken的混合效果是变暗，表示将两种颜色的RGB通道值依次进行比较，哪个色值小就使用哪个色值。最终效果的色值的计算公式是：C = min(A, B)

mix-blend-mode:lighten

值lighten的混合效果是变亮，表示将两个颜色的RGB通道值依次进行比较，哪个色值大就使用哪个色值。最终效果的色值的计算公式是：C = max(A, B)

mix-blend-mode:color-dodge

值color-dodge的混合效果是颜色变淡，最终效果的色值的计算公式是：C = A + A * B / (255 - B)

mix-blend-mode:color-burn

值color-burn的混合效果是颜色加深，最终效果的色值的计算公式是：C = A - (255 - A)(255 - B) / B

mix-blend-mode:hard-light

值hard-light的混合效果是强光，就好像耀眼的聚光灯照射过来，表现为图像亮的地方更亮，暗的地方更暗。最终效果的色值的计算公式如下所示：
- 当 B <= 128 时：C = A * B / 128
- 当 B > 128 时：C = 255 - (255 - A)(255 - B) / 128

mix-blend-mode:soft-light

值soft-light的混合效果是柔光，就好像发散的光源四处弥漫，它的表现效果和hard-light有类似之处，只是表现没有hard-light那么强烈。
- 当 B <= 128 时：C = (A * B / 128) + (A / 255)^2 * (255 - 2 * B)
- 当 B > 128 时：C = 255 - (255 - A)(255 - B) / 128

mix-blend-mode:difference

值difference的混合效果是差值，最终颜色的色值是用较浅颜色的色值减去较深颜色的色值的结果，计算公式是：C = | A - B |

mix-blend-mode:exclusion

值exclusion的混合效果是排除，最终的混合效果和difference模式是类似的，区别在于exclusion的对比度要更低一些。最终效果的色值的计算公式是：C = A + B - A * B / 128

mix-blend-mode:hue

值hue表示色调混合，作用是将颜色混合，使用底层元素的亮度和饱和度，以及上层元素的色调。

mix-blend-mode:saturation

值saturation表示饱和度混合，混合后的颜色保留底图的亮度和色调，并使用顶图的饱和度。

mix-blend-mode:color

值color表示颜色混合，混合后的颜色保留底图的亮度，并使用顶图的色调和饱和度。

mix-blend-mode:luminosity

值luminosity表示亮度混合，混合后的颜色保留底图的色调和饱和度，并使用顶图的亮度，效果和color模式正好是相反的。

滤镜和混合模式的化合反应

使用白天素材模拟夜晚

.night {width: 256px; height: 256px;background: rgba(0,40,140,.6) url(./house-bed.jpg);background-size: 100%;background-blend-mode: darken;filter: brightness(80%) grayscale(20%) contrast(1.2);
}

照片美化处理

._1977 {position: relative;/* 应用滤镜 */filter: contrast(1.1) brightness(1.1) saturate(1.3);
}
._1977:after {content: '';height: 100%; width: 100%;position: absolute;left: 0; top: 0;pointer-events: none;background: rgba(243,106,188,.3);/* 应用混合模式 */mix-blend-mode: screen;
}

照片风格化处理

.sketch {width: 256px; height: 171px;background: url(10.jpg) -2px -2px, url(10.jpg);background-size: 258px 173px;background-blend-mode: difference;filter: brightness(3) invert(1) grayscale(1);
}

background-blend-mode 提升背景重叠的颜色丰富性

.pattern {width: 300px; height: 180px;--gradient: transparent 20px, lightcoral 0 40px, transparent 0 60px;background: repeating-linear-gradient(var(--gradient)),repeating-linear-gradient(90deg, var(--gradient)), floralwhite;/* 应用正片叠底混合模式 */background-blend-mode: multiply;
}