文字高亮显示为CSS蒙版？

Question

我想知道是否可以复制此文本效果：

看起来好像文本高亮显示正在减少图像的不透明度。我猜您需要的是将背景层的副本掩盖在文本高亮显示的形状/位置中。但是，有没有一种方法可以真正使这些遮罩根据文本的行自动调整大小/重新定位？还是通过其他方式达到效果？

Answer 1

您要做的就是为不透明的文本设置background-color。

尝试一下：

#container {
  background-image: url("https://picsum.photos/500");
  height: 100px;
}

.highlight {
  background-color: rgba(255, 0, 0, 0.3);
}

<div id="container">
  <div class="highlight">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>