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

249
14 февраля 2018, 09:43

Возможно ли какими либо костылями установить картинку вместо цвета текста?

Answer 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; 
}
<div class="text"> 
  <h1>Изображение внутри буквы</h1> 
</div>

Answer 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; 
}
<div class="block"> 
  Текст  
</div>

READ ALSO
Как вырезать кусок из фона, который задан цветом?

Как вырезать кусок из фона, который задан цветом?

Имеется первый блок с bg-изображениеСлоем выше находится следующий-второй блок, но с уже bg в виде #fff, т

249
Отображение блоков в разных браузерах

Отображение блоков в разных браузерах

Вот макет, в Firefox при изменении размера колесиком, первый блок после header(class welcome) отображается не так как в ChromeКак это исправить?

216
Работа с SQL и PHP

Работа с SQL и PHP

У меня система регистрации и входаЯ добавил uniqueID-это как бы с помощью функции rand дает input value и отправляется вместе с email-ами так далее

229
CheckBox вывод данных из mysql

CheckBox вывод данных из mysql

ЗдравствуйтеУ меня есть 2 чек бокса которые выводятся из базы данных

236