Вёрстка: Заполнение текста изображением с помощью CSS

Для заполнения текста изображением с помощью CSS используйте свойство background-clip и background-image.

<div class="filledText">Ваш текст</div>

Свойство background-clip: text; для контейнера ограничит изображение только текстом. Свойство color: transparent; сделает текст невидимым, чтобы показать изображение в качестве заполнения.

.filledText {
	background-image: url('path/to/image.jpg');
	background-repeat: repeat;
	background-clip: text;
	color: transparent;
}

В данном примере текст заполнен изображением, а сверху наложен вертикальный градиент.

.filledText {
   	background-image: linear-gradient(to bottom, #2000ff00, #df000099), url('path/to/image.jpg');
	background-repeat: repeat;
	background-clip: text;
	color: transparent;

	background-color: white;
	font-size: 100px;
	font-weight: bold;
}

Свойство background-clip: text; поддерживается почти 98% браузеров. Однако, это до сих пор экспериментальная возможность.