CODEWITHSUNDEEP
htmlcss
Jan
Jan

Reputation: 99

Background-clip text from parent element

I have a page with a full-screen background that has some blocks with a black background on it. I would like to achieve that the text in those black blocks looks like it's cut out from the black box so you can see the background image.

Below is a simplified version of the HTML and CSS set-up:

.background {
background-image: url(https://picsum.photos/200/300); 
height: 100vh;
width: 100vw;   
}

.blackbox {
background-color: black;
padding: 30px;
display: inline-block;
margin-top: 100px;
margin-left: 400px;
}

.text {
font-size: 40px;   
font-weight: bold;
font-family: 'Helvetica', 'Arial', sans-serif;    
background-clip: text;    
-webkit-background-clip: text;
color: transparent;
background-image: url(https://picsum.photos/200/300); 
}
<div class="background">
   <div class="blackbox">
      <div class="text">TEXT</div>
   </div>
</div>

If I move the background image to the child text element, the clipping works but it doesn't match with the background-image on the parent element. I thought this question had my answer but the child element doesn't have a background.

Upvotes: 2

Views: 1249

Answers (1)

Crimp
Crimp

Reputation: 438

This should be responsive. mix-blend-mode is what you're looking for:

Source (https://www.w3schools.com/howto/howto_css_cutout_text.asp)

.background {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png); 
background-size: cover;
position: relative;
height: 200px;
}

.text {
  background-color: black;
  color: white;
  font-size: 5vw;
  font-weight: bold;
  margin: 0 auto;
  padding: 0 15px 0 15px;
  text-align: center;
  position: absolute;
  height: 200px;
  line-height: 200px;
  mix-blend-mode: multiply; /* This makes the cutout text possible */
}
<div class="background">
  <div class="text">TEXT</div>
</div>

Upvotes: 2

Related Questions