How to make a transparent number on a white background?

R

romanu4182017-10-17 11:19:31

css

romanu418, 2017-10-17 11:19:31

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

0

0xD34F, 2017-10-17
@romanu418

So ?

I

Ivan, 2017-10-17
@LiguidCool

Transparent *.gif ?

Z

Zbiten, 2017-10-17
@Zbiten

-webkit-background-clip:text;

H

HamSter, 2017-10-17
@HamSter007

<div class="text">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
    <defs>
      <mask id="mask" x="0" y="0" width="100%" height="100%" >
        <rect x="0" y="0" width="100%" height="100%" />
        <text text-anchor="middle" x="140" y="50" dy="1">Text</text>
        </mask>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" />
  </svg>
</div>

* {
  box-sizing: border-box;
}

.text {
  width: 100%;
  height: 250px;
  z-index: 10;
  background: url(https://image.freepik.com/free-photo/blue-sky-with-clouds_1127-282.jpg) no-repeat top center;
  background-size: cover;
  position: relative;
  padding: 20px;
}

svg { 
  width: 100%;
  text-align: center;
}
svg text {
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 38px;
}
svg rect {
  fill: white;
}
svg > rect {
    -webkit-mask: url(#mask);
    mask: url(#mask);
}

jsbin