Возможно ли с помощью каких-то способов заполнить изображением текст, вместо цвета.
4 ответа
Нашел как это сделать на чистом 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>
Вот способ только для для браузеров на движке 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>
Использование текста в качестве маски
Картинку ставим фоном, текст используется в качестве маски для изображения
Другими словами мы видим картинку через вырезы в форме букв текста.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 500" >
<defs>
<mask id="LetMask" >
<rect
x="0" y="0"
width="100%"
height="100%"
fill="#black" />
<text
font-size="300px"
font-family="serif"
x="100" y="300"
fill="white">
Text ⛵
</text>
</mask>
</defs>
<image
xlink:href="https://i.sstatic.net/sbuGW.jpg"
width="100%"
height="100%"
mask="url(#LetMask)" />
</svg>
Маска состоит из двух частей: прямоугольника перекрывающего картинку на 100% с полной непрозрачностью,- fill="black"
и полностью прозрачным текстом fill="white"
Можно добавить строку, обводку текста, которая будет полупрозрачной
stroke="grey" stroke-width="4"
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 500" >
<defs>
<mask id="LetMask" >
<rect
x="0"
y="0"
width="100%"
height="100%"
fill="#black" />
<text
font-size="300px"
font-family="serif"
x="100"
y="300"
fill="white"
stroke="gray"
stroke-width="5">
Text ⛵
</text>
</mask>
</defs>
<image
xlink:href="https://i.sstatic.net/sbuGW.jpg" width="100%"
height="100%"mask="url(#LetMask)" />
</svg>
Маску можно передвигать относительно фона
Анимация маски
Используем анимацию изменения размера и положение текста маски
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 500" >
<defs>
<mask id="LetMask" >
<rect
x="0"
y="0"
width="100%"
height="100%"
fill="#181818" />
<!-- Анимация размера шрифта -->
<text
font-size="300px"
font-family="serif"
x="100"
y="300"
fill="white">
Text ⛵
<animate id="anSize"
attributeName="font-size"
begin="0s;anX.end+0.5s"
dur="5s"
values="1;300"
fill="freeze" />
<!-- Анимация перемещения текста по координате "X" -->
<animate id="anX"
attributeName="x"
begin="anSize.end+0.5s"
dur="8s"
values="10;300;300;10;10;300;10"
fill="freeze" />
</text>
</mask>
</defs>
<image xlink:href="https://i.sstatic.net/sbuGW.jpg" width="100%" height="100%"mask="url(#LetMask)" />
</svg>
Вот еще вариант с pattern
на svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="100" viewBox="0 0 200 100">
<style>
svg{
background:transparent;
}
</style>
<pattern id="pattern" patternUnits="userSpaceOnUse"
width="200" height="100" viewBox="0 0 200 100">
<image xlink:href="https://get.wallhere.com/photo/trees-forest-fall-waterfall-water-nature-rocks-national-park-pond-jungle-stream-rainforest-watercourse-wasserfall-habitat-natural-environment-body-of-water-water-feature-57484.jpg" width="200" height="100" />
</pattern>
<text x="15" y="80" stroke="none" stroke-width="11" font-size="100px" fill="url(#pattern)" >Text</text>
</svg>
svg
background-clip
, но вам, надо полагать, нужно кроссбраузерное решение.