За розмиття вмісту елемента, включаючи зображення, відповідає функція blur(), яка застосовується до властивості filter . Ця функція розмиває все на своєму шляху, тому спершу треба ізолювати фонове зображення і потім використовувати filter. Для цього створимо псевдоелемент через ::before і до нього додамо фон через background та розмиття через filter. При цьому псевдоелемент потрібно зафіксувати, щоб він не прокручувався разом з текстом. Для цього скористаємося властивістю position зі значенням fixed і тут же поставимо розміри псевдоелемента через властивості top, left, bottom, right з нульовими значеннями.
Вміст ::before виявляється вище за текст і приховує його, так що опускаємо фон нижче властивістю z-index зі значенням-1. У результаті вийде код, показаний у прикладі 1.
Приклад 1. Розмиття фону веб-сторінки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Розмиття фону</title> <style> body::before { content: ''; position: fixed; /* Фіксуємо на одному місці */
left: 0; right: 0; /* Вся ширин */
top: 0; bottom: 0; /* Вся висота */
z-index:-1; /* Фон нижче тексту */
/* Параметри фону */
background: url(/example/image/aquaria.jpg) center /cover no-repeat; filter: blur(5px); /* Розмиття */
}
body { color: #fff; /* Колір тексту */
}
</style>
</head>
<body> <p>Суспензія, якщо розглядати процеси в рамках спеціальної теорії відносності, відображає електронний кварк.</p>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Розмите фон на веб-сторінці
Аналогічно додається та розмивається фон для окремого блоку, наприклад, <section>, але щоб фон збігався з розмірами блоку, для селектора section слід встановити відносне позиціонування, а для псевдоелемента абсолютне (приклад 2).
Приклад 2. Розмиття фону розділу
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Розмиття фону</title> <style> section { color: #fff; /* Колір тексту */
padding: 1rem; /* Поля навколо тексту */
position: relative; /* Відносне позиціонування */
}
section::before { content: '; position: absolute; /* Абсолютне позиціонування */
left: 0; right: 0; top: 0; bottom: 0; z-index:-1; background: url(/example/image/aquaria.jpg) center/cover no-repeat; filter: blur(5px); }
</style>
</head>
<body> <section>Суспензія, якщо розглядати процеси в рамках спеціальної теорії відносності, відображає електронний кварк.</section>
</body>
</html>Результат цього прикладу показаний на рис. 2.
Мал. 2. Розмите фон у блоку