使用文本剪辑平坦的背景

Question

是否可以在代码中执行此操作，以实现动态内容？ 我唯一的后备是使用图像，但它不会是动态的。

正如您所看到的，“LARIVIÈRE”这个词会剪裁白色背景以显示图像。

我找到了background-clip属性，但它在文本区域的背景中使用了图像集，在这种情况下，它并不是我真正需要的。

事先谢谢你。

Answer 1

这是 SVG 方法

＆＃13;

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Lato:700italic);

body {
  background: url('http://www.onpointpreparedness.net/wp-content/uploads/2015/01/45202-black-wood.jpg');
  background-size: cover;
  font-family: 'Lato', sans-serif;
  background-repeat: no-repeat;
  height: 100vh;
  margin: 0;
  padding: 0;
}

text {
   font-size: 70px;
}

div {
  position: absolute;
  bottom: 5%;
  left: 0;
  width: 100%;
  text-align: center;
}

span {
  font-size: 85px;
  color: white;
  letter-spacing: 30px;
  vertical-align: bottom;
  line-height: 0.9;
  padding-left: 30px;
}

＆＃13;

<div>
  <span>LOREM</span>
  <svg width="400px" height="70px">
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
      <text x='10' y="65" textLength='350'>LAVIRIERE</text>
    </mask>
    <rect fill="white" x="5" y="5" width="100%" height="100%" mask="url(#mask)"/>    
  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在我看来，最好将单词叠加为透明图像并将其放在背景图像上。