使背景模糊的 CSS

简介

有时候我们希望页面中的某个元素或者是整个页面的背景被设置为模糊效果，这时候我们就需要使用 CSS 来实现。

代码实现

1. 使用 backdrop-filter

backdrop-filter 属性可以为元素的背景景色和图片创建一个视觉效果，可以使其模糊或更改其透明度，此属性只适用于少数现代浏览器。

代码如下：

.element {
  backdrop-filter: blur(10px);
}

2. 使用 filter

filter 属性是一个将图像进行转换的通用方法。它可以让图片变得更加清晰或模糊、更加锐利或柔和、更加鲜艳或黯淡。在其中，blur() 方法可以创建一个模糊效果。

代码如下：

.element {
  filter: blur(10px);
}

3. 使用伪元素实现全屏模糊

有时候我们需要实现全屏的模糊效果，这时候我们可以使用伪元素来实现。

代码如下：

<div class="container">
  <div class="content">
    ...
  </div>
</div>

.container {
  position: relative;
}

.container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url(...);
  background-size: cover;
  filter: blur(10px);
}

4. 使用 SVG 实现模糊

如果需要更复杂的模糊效果，可以使用 SVG 来实现。

代码如下：

<div class="container">
  <div class="content">
    ...
  </div>
  <svg class="svg-blur">
    <filter id="svg-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
  </svg>
</div>

.container {
  position: relative;
  z-index: 1;
}

.svg-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.content {
  filter: url(#svg-filter);
}

总结

以上就是使背景模糊的 CSS 教程，我们可以通过以上方法来快速实现不同类型的模糊效果。