图片动态局部毛玻璃模糊效果的实现
作者从一个可拖动的模糊方块效果出发，拆解了“图片动态局部毛玻璃”这一视觉特效的核心实现。原理很直观：用一个带有模糊滤镜（CSS3 `filter: blur()`）的局部覆盖层，叠放在原始清晰背景图之上，拖动覆盖层即可实现动态局部模糊。 关键难点在于如何让模糊层与背景图精准对齐，文章给出了两种巧妙方案：一是通过JavaScript动态计算并调整覆盖层的 `background-position`；二是利用 `background-attachment: fixed` 的特性让背景图相对视口固定，从而免去计算，但后者仅适用于无滚动的场景。文章进一步展示了该技术在文字模糊、以及模拟iOS毛玻璃效果中的潜力。 最后，作者提供了一个全兼容（支持IE7+及现代浏览器）的实战案例——百度图片首页的局部动态模糊，并分享了其利用SVG `foreignObject` 将页面内容转换为图片来实现更复杂模糊效果的思路。
