CSS backdrop-filter模糊效果无显示问题（已确认定位与z-index设置正确）
2026-4-2
CSS backdrop-filter模糊效果无显示问题（已确认定位与z-index设置正确）
我仔细看了你的代码，发现几个核心问题导致backdrop-filter的模糊效果完全看不到，咱们一个个来解决：
1. 关键CSS变量未声明，模糊计算直接失效
你在.progressive-blur_panel里用了--blur和--ratio来计算模糊程度，但整个代码里完全没给这两个变量赋值！浏览器根本不知道--blur是多少像素、--ratio是多少数值，calc出来的结果就是无效的，自然看不到模糊效果。
解决办法：在全局或者模糊容器里定义这两个变量，比如在:root里加：
:root { --blur: 24px; /* 基础模糊值，可调整 */ --ratio: 2; /* 模糊衰减的比例，值越大衰减越快 */ }
2. 不必要的rotate导致容器方向颠倒
你给.progressive-blur_wrap加了transform: rotate(180deg)，这会把整个模糊容器倒过来，原本应该在页面底部的模糊区域会被翻转到顶部，而且mask的渐变方向也会跟着反向，直接导致视觉上完全看不到预期的模糊效果。
解决办法：删掉这个rotate属性，调整mask的渐变方向来实现底部的渐进模糊。
3. 优化mask渐变与panel叠加逻辑
现在多个panel的mask范围有些重叠不合理，导致模糊过渡不自然，甚至部分panel的mask完全遮掉了模糊区域。可以简化panel的数量，或者调整每个panel的mask渐变，让模糊从底部向上逐渐减弱。
修改后的完整代码
HTML（假设你的结构是这样的）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Progressive Blur Test</title> </head> <body> <div class="test-content">底部测试内容</div> <div class="progressive-blur_wrap"> <div class="progressive-blur_panel is-1"></div> <div class="progressive-blur_panel is-2"></div> <div class="progressive-blur_panel is-3"></div> <div class="progressive-blur_panel is-4"></div> <div class="progressive-blur_panel is-5"></div> <div class="progressive-blur_panel is-6"></div> <div class="progressive-blur_panel is-7"></div> <div class="progressive-blur_panel is-8"></div> </div> <!-- 测试按钮 --> <div style="position: fixed; top: 10px; left: 10px; z-index: 999;"> <p>支持backdrop-filter: <span id="support"></span></p> <button onclick="toggleBackground()">切换容器背景</button> <button onclick="toggleOverflow()">切换overflow</button> </div> </body> </html>
CSS
:root { --blur: 24px; --ratio: 2; } body { margin: 0; padding: 0; height: 200vh; /* 允许滚动 */ background: linear-gradient(to bottom, #ff0000, #00ff00, #0000ff); position: relative; } /* 测试内容 */ .test-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: white; text-align: center; font-size: 24px; font-weight: bold; } /* 渐进模糊效果 */ .progressive-blur_wrap { z-index: 99; pointer-events: none; width: 100%; height: 6rem; position: fixed; inset: auto 0 0; /* 固定在底部 */ overflow: clip; } .progressive-blur_panel { width: 100%; height: 100%; padding: 0; position: absolute; left: 0; top: 0; } /* 调整每个panel的mask和模糊值，让模糊从底部向上逐渐减弱 */ .progressive-blur_panel.is-1 { -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); -webkit-mask: linear-gradient(to top, #000 0% 20%, #0000 40%); mask: linear-gradient(to top, #000 0% 20%, #0000 40%); } .progressive-blur_panel.is-2 { -webkit-backdrop-filter: blur(calc(var(--blur) / var(--ratio))); backdrop-filter: blur(calc(var(--blur) / var(--ratio))); -webkit-mask: linear-gradient(to top, #0000 0%, #000 10% 30%, #0000 50%); mask: linear-gradient(to top, #0000 0%, #000 10% 30%, #0000 50%); } .progressive-blur_panel.is-3 { -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio)))); backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio)))); -webkit-mask: linear-gradient(to top, #0000 10%, #000 20% 40%, #0000 60%); mask: linear-gradient(to top, #0000 10%, #000 20% 40%, #0000 60%); } .progressive-blur_panel.is-4 { -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio)))); backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio)))); -webkit-mask: linear-gradient(to top, #0000 20%, #000 30% 50%, #0000 70%); mask: linear-gradient(to top, #0000 20%, #000 30% 50%, #0000 70%); } .progressive-blur_panel.is-5 { -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)))); backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)))); -webkit-mask: linear-gradient(to top, #0000 30%, #000 40% 60%, #0000 80%); mask: linear-gradient(to top, #0000 30%, #000 40% 60%, #0000 80%); } .progressive-blur_panel.is-6 { -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)))); backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)))); -webkit-mask: linear-gradient(to top, #0000 40%, #000 50% 70%, #0000 90%); mask: linear-gradient(to top, #0000 40%, #000 50% 70%, #0000 90%); } .progressive-blur_panel.is-7 { -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)))); backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)))); -webkit-mask: linear-gradient(to top, #0000 50%, #000 60% 80%, #0000 95%); mask: linear-gradient(to top, #0000 50%, #000 60% 80%, #0000 95%); } .progressive-blur_panel.is-8 { -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)))); backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)))); -webkit-mask: linear-gradient(to top, #0000 60%, #000 70% 90%, #0000 100%); mask: linear-gradient(to top, #0000 60%, #000 70% 90%, #0000 100%); }
JS（保留你的测试代码）
// Check backdrop-filter support const supported = CSS.supports('backdrop-filter', 'blur(1px)') || CSS.supports('-webkit-backdrop-filter', 'blur(1px)'); document.getElementById('support').textContent = supported ? 'OUI' : 'NON'; // Toggle background pour tester function toggleBackground() { const wrap = document.querySelector('.progressive-blur_wrap'); if (wrap.style.backgroundColor === 'rgba(255, 0, 0, 0.1)') { wrap.style.backgroundColor = ''; } else { wrap.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; } } // Toggle overflow pour tester function toggleOverflow() { const wrap = document.querySelector('.progressive-blur_wrap'); if (wrap.style.overflow === 'visible') { wrap.style.overflow = 'clip'; } else { wrap.style.overflow = 'visible'; } }
额外测试建议
- 先点击「切换容器背景」按钮，确认
.progressive-blur_wrap确实固定在页面底部，位置没问题。 - 检查页面上方的「支持backdrop-filter」显示是否为OUI，如果是NON，说明你的浏览器不支持这个属性（比如旧版Firefox），需要考虑降级方案。
- 可以调整
--blur和--ratio的值，找到你想要的渐进模糊效果。
这样修改后，你应该就能看到页面底部的渐进模糊效果了！如果还有问题，咱们再接着排查~
