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

展示

代码

• HTML：

  <h4>文字水印</h4>
  <div class="box">
      <img src="/images/common/l/1.jpg" width="256">
  </div>
  
  <h4>颜色叠加（适合浅色）</h4>
  <p><input type="search" placeholder="输入内容回车搜索"></p>
  <p id="target">可以在上面的输入框中输入任意这段内容中出现的文字或者单词，在输入内容并按回车键确认后，就会看到文字有高亮显示效果。但是，这种高亮显示效果不是通过包裹标签元素实现的，而是将色块直接覆盖在文字上面，然后通过叠加这种混合模式实现的。</p>

• CSS：

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

• JavaScript：

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