通过结合 CSS backdrop-filter 与 -webkit-mask（或标准 mask），可在背景图像上创建从透明到深色、边缘高度柔化的渐变模糊效果，避免生硬边界，提升视觉层次感。
通过结合 css `backdrop-filter` 与 `-webkit-mask`（或标准 `mask`），可在背景图像上创建从透明到深色、边缘高度柔化的渐变模糊效果，避免生硬边界，提升视觉层次感。
要实现真正“平滑”的模糊过渡（而非仅靠线性渐变叠加模糊产生的断层感），关键在于分离模糊渲染与遮罩控制：backdrop-filter: blur() 负责对底层内容进行高斯模糊，而 -webkit-mask（或现代 mask）则精准定义模糊区域的透明度衰减曲线——二者协同，才能模拟出如渐变般自然的虚化边缘。
以下是推荐实现方案（兼容 Chrome/Safari/Firefox 111+）：
.img {
background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg);
background-size: cover;
background-position: center;
width: 500px;
height: 300px;
position: relative;
}
.img::before {
content: "";
position: absolute;
inset: auto 0 0; /* 等价于 top: auto; right: 0; bottom: 0; left: 0 */
height: 200px;
pointer-events: none;
/* 使用 mask 控制模糊区域的透明度分布 */
-webkit-mask: linear-gradient(to top, transparent 0%, black 70%, black 100%);
mask: linear-gradient(to top, transparent 0%, black 70%, black 100%);
/* 模糊底层内容（即 .img 的背景图） */
backdrop-filter: blur(10px);
/* 可选：叠加轻微暗色增强对比（不影响模糊逻辑） */
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 70%, rgba(0, 0, 0, 0.8) 100%);
}
<div class="img"></div>
✅ 关键要点说明：
- backdrop-filter: blur() 作用于元素背后的内容（即 .img 的背景图），而非自身；因此需用伪元素 ::before 覆盖在顶部，同时保持其“透明通道”由 mask 控制；
- mask（或 -webkit-mask）使用纯黑→透明的线性渐变，其中 black 表示完全显示模糊效果，transparent 表示完全隐藏——这比 background: gradient 更精确地定义了模糊生效范围；
- background 在伪元素上仅用于叠加色调（如微弱暗色），不可替代 mask；若仅依赖 background-gradient + backdrop-filter，模糊会在渐变色阶处出现明显分界；
- inset: auto 0 0 是现代写法，确保伪元素贴底铺满宽度，且不干扰父容器布局流。
⚠️ 注意事项：
- backdrop-filter 在部分旧版浏览器（如 Firefox
- mask 属性已进入 CSS Masking Level 1 正式标准，但 Safari 仍需 -webkit-mask 前缀以确保兼容；
- 避免在 mask 渐变中使用过短的过渡区间（如 0%–10%），否则仍可能显现锯齿；推荐 0%–60% 透明过渡 + 60%–100% 深色强化，兼顾柔和与视觉重量。
此方案真正实现了“模糊强度随透明度渐变而自然衰减”，效果远超单纯叠加 background-gradient，是 UI 设计中营造景深与焦点引导的高效实践。
