【前端技巧】CSS常用知识碎片（八）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端技巧】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
利用叠加实现文字水印文章来源地址https://www.toymoban.com/news/detail-558436.html

<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;
}