Сегодня я получил запрос на использование эффекта размытия по Гауссу для размытия страницы. Я просто воспользовался этой возможностью, чтобы разобраться с двумя API размытия по Гауссу в CSS3.
проиллюстрировать:
Этот API представляет собой фильтр, который позволяет не только добиться размытия по Гауссу, но и многих других вещей, таких как смещение цвета, насыщенность, оттенки серого и т. д.
грамматика:
// Используйте пробелы для разделения нескольких фильтров filter: none; //Фильтр размытия по Гауссу: Blur(4px); //Линейный фильтр яркости: яркость(); // Фильтр контрастности: контраст(); // Фильтр эффекта тени: drop-shadow(); //Фильтр оттенков серого: Grayscale(); // Фильтр вращения оттенка: hue-rotate(); //Инвертировать фильтр изображения: invert(); //Преобразуем фильтр прозрачности: opacity(); // Фильтр насыщения: saturation(); // коричневый фильтр: sepia(); // Фильтр SVG filter: url();
Среди них filter: blur();
проиллюстрировать:
Когда вы создаете элемент и добавляете этот атрибут, к области позади элемента добавляются эффекты (например, размытие или сдвиг цвета).
контраст:
Атрибут фильтра должен быть загружен в изображение или фоновое изображение, а фоновый фильтр должен быть только элементом.
грамматика:
фоновый фильтр: размытие (2 пикселя); фоновый фильтр: яркость(60%); фоновый фильтр: контраст(40%); фоновый фильтр: тень (4px 4px 10px синий); фоновый фильтр: оттенки серого (30%); фоновый фильтр: оттенок-поворот (120 градусов); фоновый фильтр: инвертировать(70%); фоновый фильтр: непрозрачность (20%); фон-фильтр: сепия(90%); фоновый фильтр: насыщение (80%);
<!DOCTYPE html>
<html lang="ru">
<голова>
<стиль>
.wrapBox2 {
ширина: 800 пикселей;
высота: 300 пикселей;
переполнение: скрыто;
положение: относительное;
фоновое изображение: URL("./win.jpeg");
размер фона: 100% 100%;
фоновый повтор: без повтора;
фильтр: размытие (10 пикселей);
}
.subBox {
позиция: абсолютная;
ширина: расчет (100 % – 100 пикселей);
высота: расчет (100% - 100 пикселей);
z-индекс: 2;
}
.текст {
положение: относительное;
/* z-индекс: 10 */
размер шрифта: 40 пикселей;
начертание шрифта: жирный;
цвет: #f00;
}
</стиль>
</голова>
<тело>
<div class="wrapBox2">
<div class="subBox"></div>
<div class="text">Размыть все</div>
</div>
</тело>
</html> 
Здесь следует отметить одну вещь: после добавления размытия фактический размер будет превышать установленные нами ширину и высоту из-за окружающего эффекта заусенцев. Вы можете обернуть слой снаружи и установить overflow: hidden;
<!DOCTYPE html>
<html lang="ru">
<голова>
<стиль>
.wrapBox2 {
ширина: 800 пикселей;
высота: 300 пикселей;
/* переполнение: скрыто */
положение: относительное;
}
.subBox {
ширина: 100%;
высота: 100%;
позиция: абсолютная;
ширина: расчет (100 % – 100 пикселей);
высота: расчет (100% - 100 пикселей);
z-индекс: 2;
фильтр: размытие (10 пикселей);
}
.текст {
положение: относительное;
/* z-индекс: 10 */
размер шрифта: 40 пикселей;
начертание шрифта: жирный;
цвет: #f00;
}
</стиль>
</голова>
<тело>
<div class="wrapBox2">
<img src="./win.jpeg" class="subBox" />
<div class="text">Размыть все</div>
</div>
</тело>
</html> 
Таким образом, поскольку текст и изображение находятся на одном уровне, текст находится либо под изображением, либо над изображением (контролируется по z-индексу), не размывая текст.
<!DOCTYPE html>
<html lang="ru">
<голова>
<стиль>
.wrapBox2 {
ширина: 800 пикселей;
высота: 300 пикселей;
переполнение: скрыто;
положение: относительное;
фоновое изображение: URL("./win.jpeg");
размер фона: 100% 100%;
фоновый повтор: без повтора;
}
.subBox {
позиция: абсолютная;
ширина: расчет (100 % – 100 пикселей);
высота: расчет (100% - 100 пикселей);
z-индекс: 2;
фоновый фильтр: размытие (10 пикселей);
/* верх: 100 пикселей */
}
.текст {
положение: относительное;
/* z-индекс: 10 */
размер шрифта: 40 пикселей;
начертание шрифта: жирный;
цвет: #f00;
}
</стиль>
</голова>
<тело>
<div class="wrapBox2">
<div class="subBox"></div>
<div class="text">Частично размыто</div>
</div>
</тело>
</html> 
Как видите, атрибут back-filter не обязательно устанавливать на элементе изображения, но я думаю, что этот метод более гибкий.
Конечно, использование backdrop-filter также может удовлетворить первый сценарий.
На этом завершается статья о CSS, использующем фильтр и фоновый фильтр для достижения эффекта размытия по Гауссу (пример кода). Для получения дополнительной информации о размытии по Гауссу, пожалуйста, найдите предыдущие статьи на сайте downcodes.com или продолжайте просматривать соответствующие статьи ниже. в будущем мы будем поддерживать downcodes.com больше!