Как сделать прозрачный текст?

Мне нужно чтобы была кнопка, в которой текст был как фон (т.е. просто "дырявил блок")


    

Ответы

Ответ 1

Две SVG кнопки с прозрачным текстом.    

Анимация начинается при наведении курсора на цветные полоски слева. 
Прозрачный текст кнопок реализован при помощи SVG маски.   



body {
  background-image: url(https://i.stack.imgur.com/AZ8Hg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  font-family: verdana, sans-serif;
}

  



Ответ 2

div#wrapper {
  position: relative;
  height: 500px;
  background: url(http://img-fotki.yandex.ru/get/5807/zzots.6/0_5e7c3_42723e72_XXL.jpg);
}

div#button {
  background: white;      
  position: absolute;
  top: 160px;
  left: 73px;
  text-align: center;
  padding: 15px;
  font-size: 72px;
}

div#button span { 
     background: url(http://img-fotki.yandex.ru/get/5807/zzots.6/0_5e7c3_42723e72_XXL.jpg) -73px -160px no-repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}


  

    КНОПКА
  





Замечу, что тут два фона: один основной и один - у текста кнопки.

Важно в background с текстом поставить тот же фон, на котором кнопка и находитс
и сместить её на такое количество пикселей, на котором кнопка смещена относительно основного фона



По поводу поддержки браузерами - не могу подсказать, какие версии поддерживают. Самые последние Chrome/FF/Edge - точно работают

Поэтому, как мне кажется, лучше такое пока изображать в SVG


Ответ 3

Еще один вариант, но есть проблема с поддержкой браузерами.
mix-blend-mode на данный момент не работает в в ie/edge и частично в Safari



h1{
    background:  black;
    color: white;
    mix-blend-mode: multiply;
}