Картинка вместо цвета текста css

#html #css #css3 #svg #анимация

Возможно ли с помощью каких-то способов заполнить изображением текст, вместо цвета. 
    

Ответы

Ответ 1

Нашел как это сделать на чистом css с помощью свойства mix-blend-mode. К сожалению
он поддерживается не во всех современных браузерах.



.text {
  background: url(https://im0-tub-ru.yandex.net/i?id=eab0e1b995f2c8861ea50c27af8601bb-l&n=13);
  background-size: cover;
}

h1 {
  color: #000;
  background: #fff;
  mix-blend-mode: lighten;
  font-size:50px;
}

  
Изображение внутри буквы



Ответ 2

Вот способ только для для браузеров на движке webkit



.block{
  background:url(https://upload.wikimedia.org/wikipedia/ru/1/1d/%D0%91%D0%B5%D0%B7%D0%BC%D1%8F%D1%82%D0%B5%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C.png)
no-repeat center/cover;
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  color:yellow;
  font-weight:bold;
  font-size:90px;
}

  Текст 



Ответ 3

Вот еще вариант с pattern на svg






Ответ 4

Использование текста в качестве маски

Картинку ставим фоном, текст используется в качестве маски для изображения  

    

Другими словами мы видим картинку через вырезы в форме букв текста.








Маска состоит из двух частей: прямоугольника перекрывающего картинку на 100%  с полной
непрозрачностью,- fill="black" и полностью прозрачным текстом fill="white" 

Можно добавить строку, обводку текста, которая будет полупрозрачной 

stroke="grey" stroke-width="4" 









Маску можно передвигать относительно фона 

Анимация маски

Используем анимацию изменения размера и положение текста маски