HTML:
|
1 2 3 |
<div class="background"> <div class="transparent">Прозрачный текст</div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.background { text-align: center; background: url("background.jpg") top center; padding: 120px 10px; } .transparent { font-family: Tahoma, sans-serif; font-weight: bold; font-size: 50px; line-height: 50px; text-transform: uppercase; background: #000; color: #FFF; mix-blend-mode: multiply; padding: 10px 20px; display: inline-block; /* text-shadow: 0 0 8px rgba(0,0,0,5), 0 2px 4px rgba(0,0,0,0.7); */ } |
В итоге у нас получится это:
Пример:
Прозрачный текст
Но если мы сделаем фон светлее, например background: #337AB7, то он начнет просвечивать, а белый и вовсе будет прозрачным.
Пример с фоном #337AB7:
Прозрачный текст
Для того, чтобы текст был более заметный, можно добавить к нему тень.
Пример с тенью:
Прозрачный текст
Также стоит отметить, что для такого эффекта с прозрачным текстом подойдут только светлые фоновые изображения.
Пример c использованием фона для текста:
Еще один вариант сделать текст прозрачным - это наложить на него такой же фон, как и в блоке под ним (см.: Background для текста).
Прозрачный текст
HTML данного варианта:
|
1 2 3 |
<div class="background"> <div class="background-text"><span>Прозрачный текст</span></div> </div> |
CSS данного варианта:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.background { text-align: center; padding: 120px 10px; background: url("background.jpg") top center; } .background-text { padding: 10px 20px; background: #BFE2FF; display: inline-block; } .background-text span { font-family: Tahoma, sans-serif; font-weight: bold; font-size: 48px; line-height: 48px; text-transform: uppercase; background: url("background.jpg") top -130px center; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } |
Плюсом данного метода является то, что можно использовать любые фоновые изображения и любой цвет рамки.
А минус в том, что текст с заданным ему фоном должен умещаться в 1 строку.
Спасибо, очень помогло.
Я добавил анимированный градиентный фон - пушка!
Очень круто работает! Но не с белым фоном((((
Клас
Ого! СПасибо. Посмотрю какоментарий рработает