CSS设置高斯模糊效果

CSS设置高斯模糊效果

在CSS中，可以使用 filter 属性实现高斯模糊效果。filter 属性提供了多种图像处理功能，其中包括 blur() 函数，用于创建高斯模糊效果。

1. 基本高斯模糊

使用 filter: blur() 实现高斯模糊效果。

示例代码：

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

• 解释：
  • blur(5px)：设置模糊半径，值越大越模糊。

2. 应用于背景

如果只想模糊元素的背景，可以使用伪元素和 filter 结合。

示例代码：

<div class="blur-background">
  <p>这是一个有模糊背景的容器。</p>
</div>

.blur-background {
  position: relative;
  overflow: hidden;
}

.blur-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('background.jpg') center center / cover;
  filter: blur(10px); /* 模糊背景 */
  z-index: -1; /* 将背景放在内容下方 */
}

3. 应用于图片

直接对图片应用高斯模糊效果。

示例代码：

<img src="image.jpg" class="blur-image" alt="模糊图片">

.blur-image {
  filter: blur(8px); /* 模糊图片 */
}

4. 结合其他滤镜效果

可以结合其他滤镜效果（如亮度、对比度等）创建更复杂的效果。

示例代码：

.complex-effect {
  filter: blur(5px) brightness(0.8) contrast(1.2);
}

• 解释：
  • brightness(0.8)：降低亮度。
  • contrast(1.2)：增加对比度。

5. 应用于文本

对文本应用高斯模糊效果。

示例代码：

<p class="blur-text">模糊文本效果</p>

.blur-text {
  filter: blur(2px); /* 模糊文本 */
}

6. 动态模糊效果

通过 CSS 动画或 JavaScript 动态改变模糊效果。

示例代码：

<div class="dynamic-blur"></div>
<button onclick="toggleBlur()">切换模糊效果</button>

<script>
  function toggleBlur() {
    const element = document.querySelector('.dynamic-blur');
    element.classList.toggle('blurred');
  }
</script>

.dynamic-blur {
  width: 200px;
  height: 200px;
  background: url('image.jpg') center center / cover;
  transition: filter 0.5s ease; /* 添加过渡效果 */
}

.dynamic-blur.blurred {
  filter: blur(10px); /* 动态模糊 */
}

7. 示例代码

以下是一个完整的示例，展示如何实现高斯模糊效果：

<div class="blur-container">
  <p>这是一个有模糊背景的容器。</p>
</div>

.blur-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.blur-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('background.jpg') center center / cover;
  filter: blur(10px); /* 模糊背景 */
  z-index: -1; /* 将背景放在内容下方 */
}

.blur-container p {
  position: relative;
  z-index: 1; /* 将内容放在背景上方 */
  color: white;
  text-align: center;
  padding: 20px;
}

8. 兼容性

filter 属性在现代浏览器中支持良好，但在旧版浏览器（如 IE）中可能不支持。如果需要兼容旧版浏览器，可以使用 SVG 滤镜作为替代方案。

SVG 滤镜示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
</svg>

<div class="svg-blur">
  <p>这是一个使用 SVG 滤镜的模糊效果。</p>
</div>

.svg-blur {
  filter: url(#blur); /* 使用 SVG 滤镜 */
}

总结

• 使用 filter: blur() 实现高斯模糊效果。
• 可以应用于背景、图片、文本等元素。
• 结合其他滤镜效果可以创建更复杂的效果。
• 使用 SVG 滤镜作为兼容旧版浏览器的替代方案。

根据需求选择合适的方法即可！

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github