技巧-文字镂空效果

做一个文字镂空页面，需要一个背景图。涉及text-stroke和background-clip。

最基本的有一个蒙层和文字；

 <div class="tables">
    <div class="modal">
      <h1>I AM IN LOVE WITH YOU</h1>
    </div>
  </div>

text-stroke有兼容性问题，如果考虑到兼容性，可以使用text-shadow。 需要给文字标签添加背景。

 .modal {
    width: 100%;
    height: 100%;
    color: #000;
    background: rgba($color: #000000, $alpha: 0.7);
    h1 {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 5vw;
      text-stroke: 1px #fff; //描边
      -webkit-text-stroke: 1px #fff;
      background: var(--bg);
      background-clip: text; //背景覆盖的范围
      -webkit-background-clip: text;
      color: transparent;// 透明
    }
  }