文本突出显示为 CSS 掩码？

Question

我想知道是否可以重现此文字效果：

它应该看起来好像文本突出显示降低了图像的不透明度。我猜你需要的是在文本高亮的 shapes/positions 中被遮盖的背景图层的副本。但是有没有办法真正根据文本行自动resize/reposition制作这些面具？或者有什么其他方法可以达到这个效果？

这可能更好地解释了我所追求的：

Answer 1

您可以使用 HTML 的 mark 标签，使用不透明的背景颜色：

/*custom styling of higlihter*/
mark{
background: rgba(255, 255, 255, 0.38);
    color: black;
}
.wrap{
background-image: url("https://image.shutterstock.com/image-illustration/color-splash-series-background-design-260nw-587409425.jpg");
height: 230px;
width: 230px;
}

<div class="wrap">
Do <mark>not forget to buy milk today</mark>
<div>

注意：Internet Explorer 8 及更早版本不支持 mark 标签。

另一个解决方案，在 <p> 标签上使用 background 和 color gradient:

.wrap{
 background: grey;
 color: white;
 display: inline-block;
 background:url(https://thumbs.dreamstime.com/b/halloween-background-full-moon-creepy-house-flying-bats-halloween-background-full-moon-creepy-house-125024932.jpg);
 background-size: cover;
 height: 200px;
 width: 200px;
}
p{
font-size:20px;
    background-image: linear-gradient(to right, #ffffff00, #000000c9 , #ffffff00);
    text-align: center;
}

<div class="wrap"><p>Don't play with<p></div>

您可以相应地更改颜色。

Reference.

Answer 2

您可能正在寻找 css 属性 background-attachment: fixed。这确实有一个警告，背景将不再随页面滚动并保持静态，但这样你可以保证元素背景和容器背景之间的重叠保持不变。通过 javascript 修复了滚动问题，只需要少量开销，具体取决于浏览器对 render/reposition 的图形重量。

然后你只需将相同的背景应用到包含元素的背景（在我的例子中是 .wrap）和包含元素的文本（在我的例子中是 wrap），你就会得到你想要的效果，如第二张图片所示。

然后将标记放在段落元素中并重复文本两次。一次在段内，一次在标记内。
然后将段落设置为相对位置，将标记设置为绝对位置，使它们完美地相互重叠。这是为了抵消换行透明和不正确显示文本，因为文本也变得透明。

.wrap, .wrap mark {
   background-image: url('https://i.imgur.com/hAodNjT.jpg');
   background-attachment: fixed;
}
.wrap p {
  position: relative;
}
.wrap mark {
   position: absolute;
   top: 0px;
   left: 0px;
   opacity: 0.4;
}
img {
   width: 300px;
   height: auto;
}
.wrap {
   padding-top:160px;
   position: relative;
   width: 400px;
   height: 400px;
}
.wrap img {
   position:absolute;
   top:60px;
   
   z-index:0;
}
.wrap p {
    position:relative;
    z-index: 1;
}

<div class="wrap">
  <img src="https://i.imgur.com/cULI8TG.png">
  <p>some text that runs over the image<mark>some text that runs over the image</mark></p>
  <p>some other text that runs over the image<mark>some other text that runs over the image</mark></p>
</div>

修复了背景滚动，滚动时确实会引入更多开销

var $affected = $('.wrap, .wrap mark');
let handler = (e) => {
    $affected.css({'background-position' : '-'+window.scrollX+'px -'+window.scrollY+'px'});
}
$(window).on('resize scroll', handler);

.wrap, .wrap mark {
   background-image: url('https://i.imgur.com/hAodNjT.jpg');
   background-attachment: fixed;
}
.wrap p {
  position: relative;
}
.wrap mark {
   position: absolute;
   top: 0px;
   left: 0px;
   opacity: 0.4;
}
img {
   width: 300px;
   height: auto;
}
.wrap {
   padding-top:160px;
   position: relative;
   width: 400px;
   height: 400px;
}
.wrap img {
   position:absolute;
   top:60px;
   
   z-index:0;
}
.wrap p {
    position:relative;
    z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <img src="https://i.imgur.com/cULI8TG.png">
  <p>some text that runs over the image<mark>some text that runs over the image</mark></p>
  <p>some other text that runs over the image<mark>some other text that runs over the image</mark></p>
</div>

文本突出显示为 CSS 掩码？

Text Highlights as CSS masks?

css

text

mask

masking