CSS中blur()函数怎么用？通过blur()为元素添加高斯模糊以增强视觉效果-css教程-PHP中文网

blur()函数通过filter属性对元素及其内容应用高斯模糊，而backdrop-filter: blur()仅模糊元素背后的内容，常用于毛玻璃效果；两者在作用对象、视觉表现和应用场景上有本质区别，需根据需求选择。

css中blur()函数怎么用？通过blur()为元素添加高斯模糊以增强视觉效果

blur()

登录后复制

函数是CSS

filter

登录后复制

属性的一个强大功能，它能为任何HTML元素应用高斯模糊效果，让其内容看起来朦胧、柔和，常用于背景虚化、突出前景焦点或单纯为了提升界面的美学质感。它就像给元素蒙上了一层薄雾，既能增加层次感，也能营造出特定的氛围。

解决方案

要使用

blur()

登录后复制

函数，你需要将其作为

filter

登录后复制

属性的值应用到目标元素上。基本语法非常直接：

.my-element {
  filter: blur(radius);
}

登录后复制

这里的

radius

登录后复制

参数决定了模糊的强度。它通常以像素（

px

登录后复制

）为单位，数值越大，模糊效果越明显。例如，

blur(5px)

登录后复制

会产生中等程度的模糊，而

blur(20px)

登录后复制

则会使元素变得非常模糊，几乎无法辨认。

这个函数会作用于整个元素，包括它的内容、边框和背景。这意味着如果你对一个包含文本的

div

登录后复制

应用了

blur()

登录后复制

，那么文本也会被模糊掉。

立即学习“前端免费学习笔记（深入）”；

示例：

<div class="blurred-box">
  这是一段将被模糊的文本。
  <img src="your-image.jpg" alt="模糊图片">
</div>

<style>
.blurred-box {
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #333;
  /* 应用高斯模糊 */
  filter: blur(5px); /* 5像素的模糊半径 */
}

.blurred-box img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
}
</style>

登录后复制

在这个例子中，

blurred-box

登录后复制

内的所有内容，包括文本和图片，都会被5像素的高斯模糊处理。

CSS blur()函数与backdrop-filter: blur()有何不同？

这是很多开发者初次接触模糊效果时容易混淆的地方。我个人觉得，理解这两者的区别是掌握模糊效果的关键一步，不然很容易出现意想不到的视觉结果。

filter: blur()

登录后复制

，就像我们前面提到的，它会直接作用于你指定的元素本身及其所有内容。你可以想象成给这个元素拍了一张照片，然后把这张照片整体进行模糊处理。所以，如果你的元素有背景、有文字、有图片，那么这些都会被一视同仁地模糊掉。

而

backdrop-filter: blur()

登录后复制

则完全不同。它不会模糊元素自身，而是模糊元素下方的内容。它的作用对象是元素“后面”的区域，然后将这个模糊后的背景呈现在当前元素上。这就像你拿着一块磨砂玻璃，透过它看后面的风景——玻璃本身是清晰的，但你看到的风景是模糊的。这种效果通常用于制作毛玻璃效果，比如macOS或iOS系统中的半透明导航栏、侧边栏。

关键区别总结：

filter: blur()
登录后复制
: 模糊元素自身（包括其内容、背景）。
backdrop-filter: blur()
登录后复制
: 模糊元素下方的所有内容，元素自身保持清晰。

示例对比：

<div class="background-image"></div>

<div class="filter-blur-example">
  Filter Blur
</div>

<div class="backdrop-filter-blur-example">
  Backdrop Filter Blur
</div>

<style>
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://via.placeholder.com/1500/FF0000/FFFFFF?text=Background') no-repeat center center/cover; /* 替换为你的背景图 */
  z-index: 1;
}

.filter-blur-example, .backdrop-filter-blur-example {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #333;
  z-index: 2;
  margin-top: -80px; /* 调整位置 */
}

.filter-blur-example {
  filter: blur(8px); /* 模糊自身 */
  margin-left: -150px; /* 调整位置 */
}

.backdrop-filter-blur-example {
  backdrop-filter: blur(8px); /* 模糊它下面的内容 */
  margin-left: 150px; /* 调整位置 */
}
</style>

登录后复制

在这个例子中，

filter-blur-example

登录后复制

盒子里的文字和背景色会被模糊，而

backdrop-filter-blur-example

登录后复制

盒子里的文字是清晰的，但它透过自己的半透明背景看到的下方

background-image

登录后复制

是模糊的。这种细微但本质的差异，是实现高级UI效果的关键。

使用blur()函数时有哪些常见的陷阱和性能考量？

blur()

登录后复制

函数虽然强大，但在实际应用中确实有一些需要注意的地方，否则可能会踩坑，甚至影响用户体验。我曾经遇到过一个项目，因为过度使用

blur()

登录后复制

导致移动端页面卡顿得厉害，后来才发现是性能瓶颈。所以，适度原则非常重要。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

性能开销： 这是最主要的考量。
```
blur()
```
登录后复制
是一个计算密集型的操作，因为它需要对每个像素进行复杂的计算来模拟高斯模糊。当模糊半径很大、作用于大尺寸元素（特别是全屏背景）或者在低性能设备上时，可能会导致页面渲染变慢，动画不流畅，甚至出现掉帧。浏览器通常会尝试利用GPU加速，但这也不是万能的。
- 建议：
  - 尽量减小模糊半径。
  - 避免对频繁变化的元素（如动画中的元素）应用
```
blur()
```
    登录后复制
    。
  - 如果可能，可以考虑使用预模糊的图片，或者在非关键时刻（如页面加载完成后）逐步应用模糊。
  - 对于静态背景，可以考虑用图片处理工具预先模糊好，直接作为背景图使用。
文本可读性：
```
blur()
```
登录后复制
会模糊元素的每一个部分，包括文本。如果对包含重要文本的区域应用模糊，文本会变得难以阅读，严重影响用户体验和可访问性。
- 建议：
  - 避免直接模糊重要的文本内容。
  - 如果需要模糊背景但文本清晰，请使用
```
backdrop-filter: blur()
```
    登录后复制
    ，或者将文本内容放在一个独立的、不被模糊的层级上。
渲染边界：
```
blur()
```
登录后复制
效果可能会超出元素的原始边界。这意味着如果你有一个小盒子，应用了很大的模糊，模糊效果可能会蔓延到盒子外部，覆盖周围的元素。这通常不是问题，但有时可能需要通过
```
overflow: hidden
```
登录后复制
来裁剪超出部分的模糊，或者调整布局。
浏览器兼容性： 尽管现代浏览器对
```
filter
```
登录后复制
属性的支持已经非常广泛，但如果你需要支持非常老的浏览器，可能需要提供备用方案或使用Polyfill。
```
backdrop-filter
```
登录后复制
的兼容性相对较晚，在一些旧版浏览器中可能无法工作，需要额外的
```
@supports
```
登录后复制
规则或JavaScript检测。
与
```
transform
```
登录后复制
结合时的像素化： 当一个元素同时应用了
```
filter: blur()
```
登录后复制
和
```
transform
```
登录后复制
（特别是
```
scale
```
登录后复制
或
```
rotate
```
登录后复制
）时，在某些浏览器或特定条件下，可能会出现轻微的像素化或边缘锯齿，尤其是在动画过程中。这通常是由于浏览器渲染优化策略引起的。

总的来说，在使用

blur()

登录后复制

时，要时刻关注其对性能和可读性的影响。在开发过程中进行充分的测试，尤其是在目标用户可能使用的各种设备和浏览器上，是避免这些陷阱的关键。

如何将blur()函数与其他CSS技术结合，实现更高级的视觉效果？

blur()

登录后复制

的魅力在于它不是一个孤立的工具，而是可以和各种CSS属性玩出花样，创造出令人惊艳的交互和视觉效果。我发现，通过巧妙的组合，很多看似复杂的UI效果都能用相对简洁的CSS实现。

鼠标悬停（Hover）模糊效果： 这是最常见的应用之一。当用户鼠标悬停在图片或卡片上时，背景或图片逐渐模糊，同时可能显示清晰的文字或操作按钮，以此来引导用户交互。

<div class="card">
  <img src="https://via.placeholder.com/300x200?text=Image" alt="Placeholder" class="card-img">
  <div class="card-overlay">
    <h3>详情</h3>
    <p>点击查看更多内容</p>
  </div>
</div>

<style>
.card {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden; /* 确保模糊效果不溢出 */
  cursor: pointer;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease-in-out; /* 为模糊效果添加过渡 */
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; /* 确保不阻挡鼠标事件 */
}

.card:hover .card-img {
  filter: blur(5px); /* 悬停时图片模糊 */
}

.card:hover .card-overlay {
  opacity: 1; /* 悬停时覆盖层显示 */
}
</style>

登录后复制

结合

transition

登录后复制

或
animation
登录后复制
实现动态模糊：模糊效果本身就可以作为动画的一部分，例如页面加载时从模糊到清晰，或者模态框弹出时背景逐渐模糊。

.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('your-page-background.jpg') no-repeat center center/cover;
  filter: blur(0px); /* 初始不模糊 */
  transition: filter 0.5s ease-out; /* 添加过渡效果 */
  z-index: 99;
}

.modal-open .modal-background {
  filter: blur(10px); /* 模态框打开时模糊 */
}

登录后复制

配合JavaScript添加/移除

modal-open

登录后复制

类即可实现动态效果。

结合

clip-path

登录后复制

或
mask-image
登录后复制
实现创意模糊区域：你可以用

clip-path

登录后复制

定义一个不规则的形状，然后只对这个形状内的内容进行模糊，或者用

mask-image

登录后复制

来控制模糊的强度和区域，创造出更艺术化的效果。

<div class="creative-blur-area">
  <img src="https://via.placeholder.com/400x300?text=Creative+Blur" alt="Creative Blur">
</div>

<style>
.creative-blur-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 使用clip-path创建一个圆形区域并模糊 */
  clip-path: circle(50% at 50% 50%);
  filter: blur(8px);
}
/* 或者使用mask-image实现渐变模糊 */
/*
.creative-blur-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: linear-gradient(to right, transparent, black 50%, transparent);
  filter: blur(8px);
}
*/
</style>

登录后复制

与

transform

登录后复制

结合实现视差滚动（Parallax）中的模糊： 在一些高级视差滚动效果中，背景图片会根据滚动距离动态调整模糊程度，制造出景深感。这通常需要JavaScript来监听滚动事件，然后动态更新

filter: blur()

登录后复制

的值。

// 伪代码，实际需要更复杂的滚动监听和节流
window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  const blurAmount = Math.min(scrollY / 100, 10); // 滚动100px达到最大10px模糊
  document.querySelector('.parallax-background').style.filter = `blur(${blurAmount}px)`;
});

登录后复制

通过这些组合，