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

Суть вопроса, вы уже увидели, вот скрин того, что у меня в дизайне есть:

5f45241028c28182048064.png

Как это сделать?
  • Вопрос задан
  • 139 просмотров
Пригласить эксперта
Ответы на вопрос 3
sniggering_deus
@sniggering_deus Куратор тега Вёрстка
Dance Gavin Dance - Prisoner
Как вариант:

Использовать для достижения цели, эти свойства:

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;


И через background задать размытый фон для текста. Например можно попробовать градиентами.

Для проверки поддержки желательно использовать @supports:

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .element {
    background: (здесь изображение или градиент);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
Ответ написан
@strelok011
фон абсолютно спозиционировать внутри дополнительного контейнера за текстом. и на этот контейнер применять blur
У родителя - позишн релатив
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы