如何在IE11中实现毛玻璃（Frosted Glass）模糊效果？

问题拆解 #

你碰到的这个难题我太懂了——想做那种高级的毛玻璃效果，现代浏览器用filter: blur()几行代码就搞定，但IE9及以上偏不支持这个属性；偏偏公司政策卡得死，只能从NuGet拿资源，连StackBlur这类常用的第三方脚本都没法直接用。你尝试的让div继承body背景再模糊的思路在Firefox能跑，可就是搞不定IE，确实闹心。

可行的解决思路 #

1. 用NuGet上的兼容类库搞定IE模糊 #

先去NuGet搜索安装支持IE模糊的前端包，比如jQuery.FilterBlur这类已经封装好兼容逻辑的工具，完全符合你的资源获取限制。

基于你现有的代码，我们可以这么调整：

现代浏览器基础样式

保留你原本能在Firefox正常运行的代码：

.frost {
    box-shadow: inset 0 0 0 1000px rgba(255,255,255,0.2);
    background: inherit;
    filter: blur(10px);
    /* 你的其他样式 */
}

IE9+专属兼容逻辑

用NuGet装的jQuery插件来补全IE的模糊效果：

// 简单检测IE9及以上版本
function isIE9Plus() {
    return /MSIE 9|MSIE 10|Trident\/.*rv:1[0-1]/.test(navigator.userAgent);
}

$(document).ready(function() {
    if(isIE9Plus()) {
        // 调用插件处理.frost元素，模糊半径和CSS保持一致
        $('.frost').filterBlur({
            radius: 10,
            mode: 'inherit' // 继承父元素背景，和你的思路匹配
        });
    }
});

2. 无脚本备选：用IE9支持的SVG模糊 #

如果不想引入jQuery插件，也可以靠IE9原生支持的SVG滤镜来实现，完全不需要额外资源：

第一步：在页面里嵌入SVG滤镜

<svg style="position: absolute; width: 0; height: 0; visibility: hidden;">
    <filter id="ie-frost-blur">
        <feGaussianBlur stdDeviation="10" />
    </filter>
</svg>

第二步：给IE9+写专属CSS

/* 只针对IE9+生效的媒体查询 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .frost {
        filter: url('#ie-frost-blur');
        background: inherit;
        box-shadow: inset 0 0 0 1000px rgba(255,255,255,0.2);
    }
}

这个方案完全用原生代码，不用额外引入任何脚本，完美符合你的资源限制要求，而且效果和CSS blur能尽量对齐。

小提醒 #

• 选NuGet插件的话，一定要确认包的兼容性，确保它支持IE9及以上版本
• 背景继承的方案要注意元素的定位和层级，避免背景显示错位
• SVG模糊的stdDeviation值可以微调，让IE里的效果和现代浏览器更接近

内容的提问来源于stack exchange，提问作者eaglei22