Размытый текст вокруг - PullRequest
0 голосов
/ 14 марта 2020

Мне было интересно, можно ли сделать наоборот ... https://css-tricks.com/fun-with-blurred-text/, где у меня есть не размытый текст, но наложил вокруг него какой-то фильтр, например свечение, чтобы сделать его читаемым , Однако я не хочу, чтобы все изображение было размытым, как в Можно ли использовать -webkit-filter: blur (); на background-image?

Я попробовал решение в Белое размытие вокруг размытого фона + сохранение текста без размытия , но это не дало мне желаемого результата, потому что он создает светящийся прямоугольник, а не просто текст.

Так что в основном скажем, что у меня темный фон с некоторыми бликами и светлым текстом ... enter image description here

Я в основном хочу кое-что из темного эффекта мороза вокруг букв. Фон выполняет прокрутку параллакса, поэтому я не хочу помещать эффект заморозка в исходное положение.

1 Ответ

1 голос
/ 14 марта 2020

Это может решить вашу проблему.

#main {
  background-image: url("https://i.stack.imgur.com/dquOn.png");
  padding:20px 50px;
  display:inline-block;
}
#main h1 {
  color: #fff;
  font-size: 48px;
  text-shadow:0 0 5px #f00, 0 0 10px #f90, 0 0 15px #f00;
  font-family: 'Poiret One', cursive;
  font-weight:normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css?family=Poiret+One&display=swap" rel="stylesheet">
</head>
<body>
  <div id="main">
    <h1>Archimedes Trajano</h1>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...