在网页设计中，虚化背景图片常见于头部横幅、弹窗遮罩、登录页背景以及卡片毛玻璃等场景。核心需求是让背景呈现模糊的视觉层次，同时保证前景文字或按钮清晰可读。CSS 并没有一个单独的“背景虚化”属性，但可以通过 filter: blur()、backdrop-filter 以及伪元素分层等技巧实现。下面分别说明这些方法的实现原理、适用场景和代码写法。
一、直接使用 filter: blur() 处理背景图片
filter 是 CSS 的滤镜属性，blur() 函数接受一个长度值，数值越大模糊程度越强。如果把 filter: blur() 直接写在一个带背景图的元素上，该元素内部的所有子内容也会一起变模糊。这是因为滤镜作用于整个元素的渲染结果，而不是只作用于背景图片。因此，直接使用这种方式只适合背景元素本身没有实际内容的场景，例如用一个空的 div 单独作为背景层。
一个最基础的实现如下：
.background-layer {
width: 100%;
height: 400px;
background-image: url("../images/banner.jpg");
background-size: cover;
filter: blur(8px);
}
这种写法虽然简单，但会带来两个常见问题。第一，模糊后的元素边缘会出现透明或向内部收缩的现象，处理方式通常是给元素设置更大的尺寸，或者配合 transform: scale(1.1) 来放大背景，遮住边缘区域。第二，filter 会创建新的层叠上下文，并且模糊计算需要消耗一定的渲染资源，移动端上如果模糊半径很大、背景图分辨率很高，可能会出现滚动卡顿。
因此，当背景图上还需要放置标题、按钮等内容时，就不能直接在同一个元素上使用 filter: blur()。更好的做法是把背景层和内容层拆分开，这就引入了伪元素方案。
二、借助伪元素分离背景与内容
为了让背景图片实现虚化，同时保持前景文字清晰，常见做法是把背景图片放到伪元素 ::before 或 ::after 中。父元素负责定位和承载主要内容，伪元素绝对定位铺满父容器，设置背景图并应用 filter: blur()；父元素设置 overflow: hidden，内容通过 z-index 保持在模糊背景之上。
以下是一个典型的示例：
.hero {
position: relative;
overflow: hidden;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../images/hero.jpg");
background-size: cover;
filter: blur(6px);
z-index: 0;
}
.hero h1 {
position: relative;
z-index: 1;
color: #fff;
}
这里需要特别注意，伪元素的 content 属性必须保留，否则伪元素不会被生成。inset: 0 等价于 top: 0; right: 0; bottom: 0; left: 0;，可以让伪元素完整覆盖父元素。由于模糊后背景边缘会向内收缩，如果模糊半径较大，可以将伪元素的定位设置为负值，例如 inset: -10px，或者使用 transform: scale(1.05) 放大伪元素，避免露出父容器边缘。
这种方案的优势在于兼容性非常好，几乎所有现代浏览器以及较旧的浏览器都支持 filter 和伪元素。它的缺点也很明显：背景图片是固定在伪元素上的，无法独立于父元素进行复杂动画；同时页面中大量的模糊层会增加合成开销。对于静态页面区块的背景虚化，这种方案非常可靠，也是当前使用最广泛的做法。
三、使用 backdrop-filter 实现毛玻璃效果
backdrop-filter 与 filter 不同，它专门针对元素背后的区域应用滤镜，而元素自身及其子内容不会受到影响。这个特性非常适合实现毛玻璃卡片、悬浮导航栏、弹窗遮罩等效果。典型做法是给卡片设置半透明背景，例如 background: rgba(255, 255, 255, 0.45)，再配合 backdrop-filter: blur(10px)。这样卡片背后的页面内容会被模糊，而卡片上的文字和按钮仍然保持清晰。
示例代码：
.glass-card {
background: rgba(255, 255, 255, 0.45);
border-radius: 12px;
padding: 24px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
务必要将 -webkit-backdrop-filter 写在标准属性之前，以兼容 Safari 和部分 iOS 浏览器。Firefox 在较新版本中已经支持该属性，但早期版本需要开启相关配置。使用 backdrop-filter 时还需要注意：如果卡片背景完全透明，模糊效果通常难以察觉，因此需要保留一定的背景透明度。另外，如果某个祖先元素创建了隔离上下文或使用了 overflow 裁剪，可能会影响背后区域的可视范围，导致模糊效果与预期不一致。
与 filter 相比，backdrop-filter 的代码更简洁，能够让一个固定定位的导航栏在页面滚动时动态模糊下方内容。但它的浏览器兼容性相对差一些，因此在实际项目中通常需要配合 @supports 做降级处理。
四、三种方案对比与兼容性处理
为了更直观地比较，下面用表格列出三种实现方式的主要差异：
| 方案 | 模糊对象 | 内容是否受影响 | 兼容性 | 典型场景 |
|---|---|---|---|---|
filter: blur() | 元素自身渲染结果 | 会受影响 | 好 | 独立背景层 |
伪元素 + filter | 伪元素背景 | 不影响 | 好 | 头部横幅、页面区块 |
backdrop-filter | 元素背后区域 | 不影响 | 较好，需前缀 | 毛玻璃卡片、悬浮菜单 |
如果项目只需要静态背景虚化，并且要照顾低版本浏览器，推荐优先使用伪元素加 filter: blur() 的方案，它的兼容性最好，效果也稳定。如果项目对毛玻璃质感要求较高，且需要让背景随滚动动态变化，那么 backdrop-filter 是更自然的选择。可以使用 @supports 判断浏览器是否支持，不支持时提高背景不透明度，保证文字可读性。
@supports not (backdrop-filter: blur(1px)) {
.glass-card {
background: rgba(255, 255, 255, 0.85);
}
}
性能方面，无论是 filter 还是 backdrop-filter，模糊计算都会占用一定的 GPU 和内存资源。在移动端或低性能设备上，应尽量控制模糊半径和模糊面积，避免对大面积、高分辨率背景进行实时模糊。如果追求极致性能，可以预先使用图片处理工具生成模糊后的背景图，然后直接作为背景使用，这样客户端不需要进行任何实时滤镜计算，性能表现最好。
综合来看，CSS 虚化背景图片并没有唯一正确答案。理解 filter 和 backdrop-filter 的作用机制，再结合伪元素分层思路，就能在大多数场景中找到兼顾效果、兼容性和性能的平衡点。
CSS背景虚化backdrop-filterfilter模糊修改时间：2026-09-21 09:57:36