transparent text but opaque background in css

Question

.parent-div {
  background-image: url(path\to\image);
  background-size: cover;
}

.text-div {
  /* make text transparent but not this background */
  background-color: orange;
}

<div class="parent-div">
  <div class="text-div">Welcome!</div>
</div>

I want to make the text of text-div to be transparent so that I can see background of parent-div. and remaining part of text-div must be opaque.

Basically I want this effect :

https://stackoverflow.com/questions/13932946/transparent-text-cut-out-of-background — Temani Afif, Jan 13 '18 at 11:10

score 0 · Accepted Answer · answered Jan 13 '18 at 11:26

I found an answer for my question here: https://codepen.io/zFunx/pen/EbOQow

body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.overlay {
  background: url(https://web.opendrive.com/api/v1/download/file.json/NTlfMTM2NDExNjNf?inline=1);
  height: 100%;
  position: relative;
  background-size: cover;
}
.overlay h1 {
  position: absolute;
  background-color: #000;
  color: #fff;
  mix-blend-mode: multiply;
  text-align: center;
  font-size: 3em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="overlay">
  <h1>Mix-Blending in CSS</h1>
</div>

transparent text but opaque background in css

1 Answers1

Related