CSS-размытие фонового изображения при сохранении четкости контента

При попытке размыть фоновое изображение в настройках CSS часто приходится сталкиваться с проблема, из-за которой контент (текст или другие элементы) также становится размытым. Именно здесь в игру вступает концепция z-индекса и псевдоэлементов.

Чтобы размыть фоновое изображение, не затрагивая содержимое, можно использовать следующий подход:

1. Создание контейнера для фона: Поместите фоновое изображение в элемент div или другой контейнер и присвойте ему класс, например «blur-bgimage».
2. Представляем псевдоэлемент: В классе «blur-bgimage» добавьте псевдокласс, например :before. При этом за контейнером создается слой, который наследует фоновое изображение.
3. Размытие фона: Примените эффект размытия к псевдоэлементу с помощью фильтров CSS. Это приведет к размытию унаследованного фонового изображения, не затрагивая содержимое.
4. Наложение содержимого: Поместите содержимое в контейнер «blur-bgimage», убедившись, что оно имеет более высокий z-индекс (например, , z-index: 1), чем размытый фон (z-index: 0).

Ниже приведен пример код:

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter: blur(10px);
    -moz-filter: blur(10px);
    -webkit-filter: blur(10px);
    -o-filter: blur(10px);

    transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
}

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