图像模糊 CSS

在开发 Web 应用程序时，我们通常希望能够对图像进行一些动态和有趣的效果处理。其中之一就是图像模糊效果。CSS 提供了一些属性和值，可以帮助我们在网页中添加图像模糊效果。

blur()

blur() 函数可以应用模糊效果到任何元素（例如图片、背景等）。以下是应用模糊效果的 CSS 代码示例：

img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

-webkit-filter 属性适用于 WebKit 浏览器，filter 属性适用于其它浏览器。在上述示例中，我们将模糊半径设置为 5px。

backdrop-filter

backdrop-filter 属性可以为元素的背景（包括模糊、饱和度、亮度等效果）应用过滤器效果，它可以为背景应用模糊效果。以下是应用模糊效果的 CSS 代码示例：

// WebKit 浏览器
-webkit-backdrop-filter: blur(5px);

// 其它浏览器
backdrop-filter: blur(5px);

在上述示例中，我们将模糊半径设置为 5px。

使用 CSS 来制作高斯模糊效果

除了上面提到的 blur() 函数和 backdrop-filter 属性外，我们还可以使用 CSS 实现更高级的图像模糊效果。以下是应用高斯模糊效果的 CSS 代码示例：

.gaussian-blur {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gaussian-blur::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("your-image-url");
  filter: blur(30px);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.gaussian-blur:hover::before {
  // 高斯模糊效果
  opacity: 1;
}

在上述示例中，我们将图片添加到 CSS 伪元素 ::before 上，并通过 opacity 和 transition 属性控制其显示。我们还使用 filter 属性将模糊半径设置为 30px，从而实现高斯模糊效果。

结论

以上是在 Web 界面上实现图像模糊效果的三种常用方法。根据您的需求和平台差异，可以选择灵活地使用这些方法。无论是在图片、背景还是整个页面中应用这些方法，都可以为您的网站增添一份美感。