Как сделать прозрачную цифру на белом фоне?

Question

[romanu418]

Answer 1

[0xD34F]

Так?

Comments

[Иван]

Да, но я бы не советовал это использовать.
Метод в статусе "Кандидат в рекомендации". Не будет работать в Осле, мобилах и даже в относительно старых Хромах.
Пруф (поправьте, если не прав).

Answer 2

[Zbiten]

-webkit-background-clip: text;

Answer 3

[HamSter]

<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);
}

Answer 4

[Иван]

Прозрачный *.gif ?