使用css实现模糊的效果

在 CSS 中，实现模糊效果主要使用 filter 属性的 blur() 函数。 blur() 函数接受一个 CSS 长度值作为参数，表示模糊的半径。值越大，模糊程度越高。 0 表示没有模糊。

以下是一些使用 blur() 的例子以及一些相关的技巧：

1. 基本用法：

.blurred-element {
  filter: blur(5px); /* 模糊半径为 5px */
}

2. 结合其他滤镜效果：

blur() 可以和其他滤镜函数结合使用，例如 brightness()、contrast()、saturate()、grayscale()、sepia()、hue-rotate()、drop-shadow() 等，创造更丰富的视觉效果。

.blurred-and-darkened {
  filter: blur(3px) brightness(0.7); /* 模糊并降低亮度 */
}

3. 模糊背景图片：

.blurred-background {
  background-image: url("image.jpg");
  background-size: cover;
  filter: blur(8px);
}

/*  为了防止背景模糊影响到前景内容，可以将背景图片放在一个伪元素中，例如 ::before 或 ::after，并对伪元素应用模糊效果。*/

.blurred-background-with-content {
  position: relative;
  background-image: url("image.jpg");
  background-size: cover;
}

.blurred-background-with-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: inherit;
  filter: blur(8px);
  z-index: -1; /* 将伪元素置于内容之后 */
}

4. 模糊文本：

直接对文本应用 blur() 效果可能会降低可读性。建议将文本放在一个带有背景的元素上，然后对背景应用模糊效果。

5. 性能考虑：

过度使用模糊效果可能会影响页面性能，尤其是在移动设备上。建议谨慎使用，并尽量避免对大型元素或动画元素应用模糊。可以使用 Chrome DevTools 等工具来分析性能瓶颈。

6. backdrop-filter (背景模糊):

backdrop-filter 属性可以让你模糊一个元素后面的区域，而不是元素本身。这对于创建模糊的玻璃效果非常有用。需要注意的是，backdrop-filter 的浏览器兼容性不如 filter 好。

.blurred-glass {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

示例 - 模糊的背景图片和清晰的前景文本：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}
.container {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  color: white;
}
.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("your-image.jpg"); /* 替换为你的图片 */
  background-size: cover;
  filter: blur(10px);
  z-index: -1;
}
</style>
</head>
<body>
<div class="container">
  Hello World
</div>
</body>
</html>