mix-blend-mode:overlay叠加模式的应用实例页面

文字水印

颜色叠加（适合浅色）

可以在上面的输入框中输入任意这段内容中出现的文字或者单词，在输入内容并按回车键确认后，就会看到文字有高亮显示效果。但是，这种高亮显示效果不是通过包裹标签元素实现的，而是将色块直接覆盖在文字上面，然后通过叠加这种混合模式实现的。

.box { position: relative; } .box::before { content: "cssworld.cn"; 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; }

ui-overlay { position: absolute; background: red; mix-blend-mode: overlay; z-index: 9; }

p { color: gray; }

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

});