Как добавить текст поверх блюра?

Question

Я новичок. Как добавить текст поверх блюра? Я сделал блюр для изображения, но при добавлении любой надписи - текст искажается. Пытался решить проблему через добавление второго класса , но это не помогло(класс оставил). Прошу вашей помощи.

.wrap{
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-image: url("https://images.wallpaperscraft.ru/image/single/kot_zelenyj_fon_bliki_78445_3840x2400.jpg");
    @media only screen and (max-width: 767px) {   body {     /* Здесь размер файла уменьшен на 93% чтобы  увеличить скорость загрузки страницы с мобильных устройств */     background-image: url(https://images.wallpaperscraft.ru/image/single/kot_zelenyj_fon_bliki_78445_3840x2400.jpg);   } }
}
.mateffect {
        content: '';
        background: inherit;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-shadow: inset 0 0 0 3000px rgba(150, 150, 150, 0.192);
        filter: blur(10px);
        border-radius: 15px;
        background: inherit;
        overflow: hidden;
}

.contentmateffect {
         background-position: 100% 50%;
      }

<div class="wrap">
<div class="mateffect">
    <div class="contentmateffect">
     <h1 class="animated" id = "assort">Предложения:</h1>
    </div>
    </div>
    </div>

Answer 1

Если бы почитали про filter, то узнали, что он действует на себя и дочерние элементы.
Мне кажется, для вашей задачи больше подойдёт backdrop-filter.

.wrap {
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("https://i.imgur.com/3yJbNmI.jpeg");
  padding: 20px;
}

.mateffect {
  border-radius: 15px;
  background: rgba(150, 150, 150, 0.192);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 20px;
}

<div class="wrap">
  <div class="mateffect">
    <div class="contentmateffect">
      <h1 class="animated" id="assort">Предложения:</h1>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как добавить текст поверх блюра?

Ответы (1 шт):