Text Highlights as CSS masks? - css

Question

I'm wondering if it's possible to reproduce this text effect:
It should appear as if the text highlights were reducing the opacity of the images. I guess what you need is a copy of the background layer getting masked in the shapes/positions of the text highlights. But is there a way to really make these masks automatically resize/reposition according to the lines of text? Or any other way to achieve the effect?
This might better explain what I'm after:

Answer 1

You might be looking for the css property background-attachment: fixed. This does have the caveat that the background will no longer scroll with the page and remain static, but this way you can guarantee the overlap between the element background and the container background remain the same. There is a fix for the scrolling issue via javascript, for a minor overhead cost, depending on how heavy the graphics are for the browser to render/reposition.
Then you simply apply the same background to the background containing element(.wrap in my case) and the text containing element(wrap in my case) and you get your desired effect as shown in your second image.
Then put the mark in a paragraph element and repeat the text twice. Once in the paragraph, once within the mark.
Then set the paragraph to position relative, and the mark to absolute, so they overlap each other perfectly. This is to counteract the wrap being transparent and not showing the text properly, as the text also becoming transparent.
.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>
with a background scroll fix, does introduce more overhead when scrolling
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

You can use mark tag of HTML using background color with opacity:
/*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>
Note: the mark tag is not supported in Internet Explorer 8 and earlier versions.
Another solution, using background and color on <p> tag with 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>
You can change the color accordingly.
Reference.