How to create transparent text on non-transparent background

Question

Imagine that: there is a background assigned to "body" and a white "div" with a text inside of it. And this text is so that we can see the background through it. How to implement that with CSS? Like this:

I think this is a duplicate of [http://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css](http://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css) — Corporalis, Sep 23 '16 at 09:49
[opacity](http://www.w3schools.com/cssref/css3_pr_opacity.asp) might be a good read for you :) — Roy123, Sep 23 '16 at 09:50
The text on a web browser is always its own "thing". It is not a part of its container and will not "cut out" its container when set to color: transparent or opacity: 0 in css. Therefore if the color is set to transparent or the opacity is set to 0, the text will always appear invisible. Imagine that web elements are all "solid" elements-- by setting the color to transparent you are essentially creating text using clear plastic, laying clear plastic on top of cardboard does not allow you to see what is behind the cardboard. — maxandcoffee, Nov 22 '19 at 19:22

Nenad Vracar · Accepted Answer · 2019-01-31T11:46:21.990

You can use SVG to create a mask with a rect element for the white background and a text element for transparent text part.

body {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg');
  background-size: cover;
  height: 100vh;
  background-position: center;
  font-family: 'Open Sans', sans-serif;
}

svg {
  width: 300px;
  height: 100px;
}
svg text {
  text-anchor: middle;
}
svg #overlay {
  fill: white;
  opacity: 0.7;
}
svg #text {
  font-size: 40px;
  font-weight: bold;
}

svg #r {
  fill: white;
  mask: url(#mask);
}

<svg>
  <defs>
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <rect id="overlay" x="0" y="0" width="100%" height="100%" />
      <text id="text" x="50%" y="0" dy="65px">Some text</text>
    </mask>
  </defs>
  <rect id="r" x="0" y="0" width="100%" height="100%" />
</svg>

Update: To create full element size overlay with transparent text you can use position: relative on parent element and position: absolute on svg and set mask height and width to 100%. To center the text you can use dy: 50% with alignment-baseline: middle; and text-anchor: middle;

body {
  margin: 0;
  padding: 0;
}

.element {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg');
  background-size: cover;
  height: 100vh;
  background-position: center;
  font-family: 'Open Sans', sans-serif;
  position: relative;
}

section {
  height: 100vh;
  background: lightgreen;
}

svg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

svg text {
  text-anchor: middle;
  alignment-baseline: middle;
  font-size: 40px;
  font-weight: bold;
}

svg #overlay {
  fill: white;
  opacity: 0.7;
}

svg #r {
  fill: white;
  mask: url(#mask);
}

<div class="element">
  <svg>
    <defs>
      <mask id="mask" x="0" y="0" width="100%" height="100%">
        <rect id="overlay" x="0" y="0" width="100%" height="100%" />
        <text  id="text" x="50%" y="0" dy="50%">Some text here</text>
      </mask>
    </defs>
    <rect id="r" x="0" y="0" width="100%" height="100%" />
  </svg>
</div>

<section></section>

score 0 · Answer 2 · answered Sep 23 '16 at 09:56

0

Use opacity;

html:

<body>
    <div class='frontimage'>

    </div>
</body>

css:

body{
    background-image: url("yourimage.jpg");
}
.frontimage{
    background-image: url("yourotherimage.jpg");
    opacity: 0.5;
}

answered Sep 23 '16 at 09:56

Roy123

383
4
17

score 0 · Answer 3 · answered Sep 23 '16 at 10:05

with css you can use opacity:0.6; (0 = full transparent - 1 = full visible).

*{font-family:Helvetica, Arial, Sans-Serif;}
.background{background:url(http://www.paisajesbonitos.org/wp-content/uploads/2015/11/paisajes-bonitos-de-oto%C3%B1o-lago.jpg);}
.text{font-size: 5em; font-weight:bold; opacity:0.6;}

<div class="background">
 <span class="text">
   Lorem ipsum 
 </span>
</div>

with photoshop you can decrease the refill bar of text layer or increase transparency of this layer.

How to create transparent text on non-transparent background

3 Answers3