Question

我试图模仿这个磨砂玻璃外观：https://codepen.io/AmJustSam/pen/ModORY

找出IE9 +不支持过滤器：blur（..

经过很多关于这个主题的文章和讨论，大多数似乎都指向使用第三方选项，比如stackblur脚本，除非我可以从nuget（公司政策）下载，否则这对我来说不是一个选项。我试图将身体背景图像继承到div，然后将其模糊以使其呈现磨砂外观。

这在Firefox中运行良好：

.frost
{

    box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
    filter: blur(10px);
    overflow: hidden;
    background: inherit;
}

但不是IE11。我遇到svg的一些解决方案是模糊图像本身。如果可能的话，如何用svg模糊div继承的背景？

编辑：虽然建议的副本对我没有帮助，因为它不会修改继承的背景，只能用SVG覆盖它上面的图像。似乎这可能是唯一的解决方案。所以，使用可能的重复响应中的示例：

svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svgBlur">

  <filter id="svgBlurFilter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="nonblurred" />

  <image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="blurred" filter="url(#svgBlurFilter)" />

</svg>

似乎让我朝着正确的方向前进，但图片标签上的图片尺寸以像素为单位。如何使其动态显示以百分比定义的div的宽度。

在IE11中模糊效果来创建磨砂玻璃

0 个答案: