Home transparent text but opaque background in css
Reply: 1

transparent text but opaque background in css

Shiv C Kushawah
1#
Shiv C Kushawah Published in 2018-01-13 10:55:24Z

This question already has an answer here:

  • How to make “see through” text? 2 answers

.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 :

Shiv C Kushawah
2#
Shiv C Kushawah Reply to 2018-01-13 11:26:56Z

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>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.338363 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO