九八云安全使用CSS实现图片模糊
通过CSS的filter属性可以轻松为图片添加模糊效果,支持动态调整模糊强度。
<img src="image.jpg" class="blur-image">
.blur-image {
filter: blur(5px); / 数值越大越模糊 /
}
| 属性 | 说明 | 取值范围 |
|---|---|---|
blur() |
高斯模糊滤镜 | 0~10px |
filter |
复合滤镜（可叠加多种效果） | 多个函数组合 |
浏览器兼容性
- 现代浏览器：Chrome/Firefox/Edge等直接支持
filter: blur() - Safari：需添加
-webkit-前缀 - IE/旧版浏览器：不支持
filter属性（需降级处理）
进阶实现方式
| 方法 | 适用场景 | 代码特点 |
|---|---|---|
| CSS Filter | 快速实现静态模糊 | 代码简洁，性能较好 |
| SVG 滤镜 | 复杂模糊效果（如动态调整） | 需嵌套SVG代码，较复杂 |
| JavaScript | 动态控制模糊强度 | 灵活性高，但性能消耗大 |
SVG滤镜示例
<svg width="0" height="0">
<filter id="svgBlur" x="0" y="0">
<feGaussianBlur stdDeviation="5"/>
</filter>
</svg>
<img src="image.jpg" style="filter:url(#svgBlur)">
注意事项
- 性能影响：大尺寸图片或多张模糊图片可能影响渲染性能
- 替代方案：可预先用PS处理模糊图片，减少浏览器计算压力
- 交互限制：模糊后的图片可能无法二次编辑（如裁剪、缩放）
- 兼容性处理：对不支持
filter的浏览器可显示原图.blur-image { filter: blur(5px); transition: filter 0.3s; / 添加过渡效果 / } .blur-image:hover { filter: none; / 鼠标悬停时取消模糊 / }
相关问题与解答
问题1：如何动态调整模糊强度？
解答：可通过JavaScript修改filter属性值：
const img = document.querySelector('.blur-image');
img.style.filter = `blur(${slide.value}px)`; // slide是输入滑块
问题2：模糊效果在移动端表现如何？
解答：
- 移动端浏览器普遍支持
filter属性（iOS需测试） - 建议：
- 控制图片尺寸（避免过大）
- 限制模糊值（建议
<5px） - 测试真机性能（部分低端机可能卡顿）
