css模糊制作
CSS模糊效果实现方法
使用filter: blur()属性
通过CSS的filter属性配合blur()函数实现模糊效果。数值越大模糊程度越高，例如：
.blur-effect {
filter: blur(5px); /* 5像素模糊半径 */
}模糊背景与内容分离
若需仅模糊背景而保持内容清晰，可使用伪元素或额外层：
.container {
position: relative;
}
.container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("bg.jpg");
filter: blur(8px);
z-index: -1;
}性能优化技巧
- 对静态元素使用
will-change: filter提前告知浏览器优化渲染 - 限制模糊范围，避免大面积应用
- 配合
transform: translateZ(0)触发硬件加速
文字模糊的特殊处理
文字直接模糊可能导致可读性下降，可通过叠加半透明背景提升对比度：
.text-blur {
filter: blur(1px);
background-color: rgba(255,255,255,0.7);
padding: 0.5em;
}浏览器兼容性
现代浏览器均支持filter属性，对旧版IE需使用SVG滤镜或降级方案：
/* IE9-备用方案 */
.no-cssfilter .blur-fallback {
opacity: 0.8;
}
