CSS 背景过滤器 blur

CSS 背景过滤器 blur 是一种可用于模糊图像或元素的 CSS 属性。它基于高斯模糊算法，可以将元素或视口的背景模糊化，以使页面的其他元素更加突出或减轻背景的干扰。本篇文章将介绍使用 CSS 背景过滤器 blur 的方法。

语法

CSS 背景过滤器 blur 可以使用以下语法进行设置：

filter: blur(value);

其中，value 用于设置模糊程度。value 的单位可以是像素(px)或百分比(%)，取值范围为0（无效果）到任意正整数（值越大，模糊程度越高）。

示例

HTML

我们先在 HTML 文件中定义一个元素，用于测试背景过滤器 blur 的效果。

<div class="blur">
  <h1>Hello World</h1>
  <p>This is a test of blur filter in CSS</p>
</div>

CSS

我们在 CSS 文件中定义 .blur 类，并为其设置背景图片。

.blur {
  background-image: url('path/to/image.jpg');
  background-size: cover;
  height: 100vh;
  filter: blur(5px);
}

效果

当浏览器渲染这段代码时，.blur 元素的背景图片将应用背景过滤器 blur，产生一个较高的模糊度，如下图所示。

注意事项

• 背景过滤器 blur 属性在一些较老的浏览器（如 IE 9 以及更早版本）中不被支持。
• 过大的模糊度数值可能会造成页面性能问题，因此在使用时需要进行慎重考虑。