用透明字母的SVG背景,以查看其他内容

Question

我需要运行一个视频,其顶部是一个黑色div,不透明度小于1,但有一些文本透明,允许用户看到后面的视频,还有一个具有相同效果的按钮.

这是我正在寻找的图片:

我在另一个版本中通过使用覆盖视频区域的png来管理这个,但是现在我需要那个按钮才能产生相同的效果,我虽然关于SVG,但我不知道我是否可以使用它或者怎么样.

谢谢

Answer 1

这是我如何使用覆盖背景的SVG图像来做到这一点.

.wrapper {
  position: relative;
}

.wrapper svg {
  position: absolute;
  left: 0;
  top: 0;
}

<div class="wrapper">
  <img src="http://lorempixel.com/640/480"/>

<svg id="overlay" width="640" height="480" viewBox="0 0 640 480">
  <defs>
    <mask id="mymask">
      <rect width="100%" height="100%" fill="white"/>
      <text x="320" y="140" text-anchor="middle" font-size="40px" >Some transparent text</text>
      <text x="320" y="190" text-anchor="middle" font-size="40px" >has been placed here</text>
      <rect x="220" y="300" width="200" height="50" fill="black"/>
      <text x="320" y="335" text-anchor="middle" fill="white" font-size="30px">BUTTON</text>
    </mask>
  </defs>

  <rect fill="black" fill-opacity="0.7" width="100%" height="100%" mask="url(#mymask)"/>
</svg>
  
</div>