css磨砂背景制作
使用 backdrop-filter 属性
通过 backdrop-filter 属性可以直接为元素添加磨砂效果。该属性会对元素背后的内容应用滤镜效果，适合用于模态框、侧边栏等场景。
.blur-background {
background-color: rgba(255, 255, 255, 0.3); /* 半透明背景 */
backdrop-filter: blur(10px); /* 模糊程度 */
-webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
}使用伪元素模拟磨砂效果
如果 backdrop-filter 兼容性不足，可以通过伪元素模拟磨砂效果。先固定一个背景层，再对其模糊处理。
.blur-effect {
position: relative;
overflow: hidden;
}
.blur-effect::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('your-image.jpg') center/cover;
filter: blur(10px);
z-index: -1;
opacity: 0.8; /* 调整透明度 */
}结合 SVG 滤镜
通过 SVG 滤镜可以实现更复杂的模糊效果，适合对特定区域精细化控制。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
</svg>.svg-blur {
filter: url('#blur');
background-color: rgba(255, 255, 255, 0.5);
}动态磨砂背景（JavaScript 辅助）
若需要背景随页面滚动动态模糊，可通过 JavaScript 监听滚动事件，调整模糊程度。
window.addEventListener('scroll', function() {
const blurValue = Math.min(window.scrollY / 10, 20);
document.querySelector('.dynamic-blur').style.backdropFilter = `blur(${blurValue}px)`;
});.dynamic-blur {
transition: backdrop-filter 0.3s ease;
}注意事项
backdrop-filter在部分旧浏览器（如 IE）中不支持，需提供降级方案。- 模糊效果可能影响性能，尤其在移动端需谨慎使用。
- 调整
rgba中的 alpha 值可控制背景透明度，避免内容可读性下降。
