Текст выделяется как CSS маски?

Question

Мне интересно, возможно ли воспроизвести этот текстовый эффект:

Это должно выглядеть так, как если бы выделение текста уменьшало непрозрачность изображения. Я думаю, что вам нужно, это копия фонового слоя, маскируемая по формам / позициям подсветки текста. Но есть ли способ действительно заставить эти маски автоматически изменять размер / перемещать в соответствии со строками текста? Или каким-либо другим способом добиться эффекта?

Это может лучше объяснить, что я преследую:

Answer 1

Возможно, вы ищете css свойство background-attachment: fixed . Здесь есть предостережение, что фон больше не будет прокручиваться вместе со страницей и останется неизменным c, но таким образом вы можете гарантировать, что перекрытие между фоном элемента и фоном контейнера останется прежним. Исправлена ​​проблема с прокруткой через javascript, за небольшие накладные расходы, в зависимости от того, насколько тяжелой является графика для браузера / рендеринга.

Затем вы просто применяете тот же фон к фону. содержащий элемент (.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>

Answer 2

Добро пожаловать на ТАК! Вы можете использовать mark тег HTML, используя цвет фона с непрозрачностью

/*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>

ПРИМЕЧАНИЕ. Метка метки не поддерживается в Inte rnet Explorer 8 и более ранних версиях.

Другое решение с использованием background и color на теге <p> с 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>

Вы можете соответственно изменить цвет

REF