IE 11 中的 CSS 模糊 [英] CSS Blur in IE 11
问题描述
几个小时以来，我一直试图在 IE 11 中获得 css 模糊效果，但没有取得任何进展.我尝试使用以下简单的 html:
I have been trying to get A css blur effect in IE 11 for hours and did not make any progress. I tried to use the following simple html:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.blur{
-ms-filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='50');
}
</style>
</head>
<body>
<img src='http://img3.wikia.nocookie.net/__cb20120627075127/kirby/en/images/0/01/KDCol_Kirby_K64.png' class="blur" />
</body>
</html>
我也试过只使用没有 ms 前缀的过滤器.我在 http://jsbin.com/ulufo/31/edit 上看到了那个过滤器代码，甚至参考了微软的例子 http://samples.msdn.microsoft.com/workshop/samples/author/filter/blur.htm 在我的 Win7 上的 IE 11 中不起作用.你有什么想法，我可能做错了什么?
I also tried just using the filter without the ms prefix. I saw that filter code on http://jsbin.com/ulufot/31/edit and even consulted the microsoft example http://samples.msdn.microsoft.com/workshop/samples/author/filter/blur.htm which does not work in my IE 11 on Win7. Do you have any ideas, what I could be doint wrong?
如果你也在苦苦挣扎，可能会很有趣:http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm
probably interesting if you are struggling too: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm
推荐答案
根据此博客 (http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS) IE9 后删除了模糊滤镜:
According to this blog (http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS) the blur filter was dropped after IE9:
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
他们确实提供了一个名为 StackBlur 的解决方案(使用 JavaScript 和 Canvases):
They did give a solution called StackBlur (using JavaScript and Canvases):
http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
它采用可从该站点下载的 javascript 插件的形式.
It is in the form of a javascript add-on downloadable from that site.
这篇关于IE 11 中的 CSS 模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
