logo标签列表

在Firefox、Internet Explorer和Opera中，filter: blur(1px);不起作用。

cssinternet-explorerfirefoxbrowseropera
31

我在CSS方面遇到了问题。当我尝试去做的时候

-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);

在Safari和Chrome中看起来完美，但在Firefox、Opera或Internet Explorer中完全没有模糊效果。这些浏览器是否支持它？或者是否有其他方法可以使整个页面模糊？

3
现在它在Firefox35+中可以工作。 - Hashem Qolami
6个回答
46

尝试使用SVG滤镜。

img {
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url(#blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
<img src="https://istack.dev59.com/oURrw.webp" />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg>

6
这对我很有效。值得注意的是，您可以通过粘贴代码并使用格式url(#blur)来内联使用它，而无需添加SVG文件。我的示例：http://jsbin.com/ulufot/31/edit - Anders H
1
对于IE8，您将需要使用feGaussianBlur stdDeviation="3"></feGaussianBlur>。 - user1357678
8
更好（我认为）： .svg-only-blur{ filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg\'><filter id='blur' x='0' y='0'><feGaussianBlur stdDeviation='3'/></filter></svg>#blur"); }该段代码的含义是：应用高斯模糊效果到类名为“.svg-only-blur”的元素上，通过SVG滤镜实现。 - 8steve8
9
在Chrome和Firefox上可以运行，但在IE11上无法运行。我尝试了@calvintennant的评论，但也没有起作用。 - Murhaf Sousli
17
filter: blur(3px);
-webkit-filter: blur(3px);
-ms-filter: blur(3px);
filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='3'%20/></filter></svg>#blur");
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
8
这里有一种新型的模糊技术，可适用于所有浏览器（包括Internet Explorer 10/11），不需要滤镜、画布或JavaScript。
基本技术是缩小图像大小，然后在父元素上使用3D缩放矩阵来缩放回全尺寸。这有效地对图像进行了降采样和粗略模糊效果。 

body {
  font-family: Verdana;
  font-size: 14px;
  font-weight: bold;
}

.container {
  height: 500px;
  width: 500px;
  position: relative;
  overflow: hidden;
}

#image {
  background-image: url('http://i.imgur.com/HoWL6o3.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  position: absolute;
}

#image.blur {
  transform: matrix3d(1, 0, 0, 0,
                      0, 1, 0, 0,
                      0, 0, 1, 0,
                      0, 0, 0, 0.05);
  background-size: 0 0;
}

#image.blur:before {
  transform: scale(0.05);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-image: inherit;
  background-size: contain;
  background-repeat: inherit;
}
<div class="container">
  <div id="image" class="blur"></div>
</div>

Demo: http://codepen.io/rkogan/pen/jPdGoM/

StackBlur比较好。 - Alex78191
7

我尝试了以上所有方法，但通常情况下，Internet Explorer / Microsoft Edge希望以不同的方式处理事情，因此我无法使其保持一致。

最终，我不得不跳过一系列障碍，才能使它在所有现代浏览器中按照我想要的方式工作：

  1. Use the CSS already mentioned so it would work on non-IE browsers without the overhead of the fix I had to use for IE:

    -webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);

  2. Detect whether Internet Explorer / Microsoft Edge was being used using this JavaScript (thanks Mario).

  3. If Internet Explorer / Microsoft Edge was detected then load the image into a hidden img field on the page. You have to do this using the onload function to make sure the image has loaded before you operate on it otherwise the next step fails (thanks Josh Stodola):

    var img = new Image();
img.onload = function() { blurTheImage(); }
img.src = "http://path/to/image.jpg";

  4. Use StackBlur JavaScript which works on IE and Edge (thanks Mario Klingemann). The image should be available by CORS.

    HTML:

    <div id="ie-image-area" style="display: none;">
    <img id="ie-image"/>
    <canvas id="ie-canvas"></canvas>
</div>

    JavaScript:

    function blurTheImage() {
    $("#ie-image").attr("src", "http://path/to/image.jpg");
    StackBlur.image('ie-image', 'ie-canvas', 1, false);
}

  5. As it happens I wanted to set is as a background, so I had to convert the image before setting the data (thanks user3817470):

    imageLinkOrData = document.querySelector('#ie-canvas').toDataURL("image/png");
$('#background-image').css('background-image', 'url(' + imageLinkOrData + ')');

  6. Once loaded and blurred I then faded it in using CSS and a transparency class as jQuery fadeTo wasn't looking great (thanks Rich Bradshaw):

    $('#background-image').toggleClass('transparent');

哎呀，我想我需要喝杯茶休息一下（或许需要更强力的东西！）

这是它运行的示例（感谢Alex78191）：

function detectIE() {
  return navigator.userAgent.search(/MSIE|Trident|Edge/) >= 0;
}

let image = document.querySelector('#img-for-blur');
image.src = image.getAttribute('data-src');
if (detectIE()) {
  image.onload = function() {
    StackBlur.image('img-for-blur', 'ie-canvas', 4, false);
  };
} else {
  image.style.display = 'block';
}
img {
  filter: blur(4px);
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.0/stackblur.js"></script>
<img id="img-for-blur" data-src="https://istack.dev59.com/oURrw.webp">
<canvas id="ie-canvas"></canvas>

3

听起来很合理，目前支持的浏览器有：

  • Chrome 18+
  • Chrome for Android 25+
  • Safari 6+
  • iOS Safari 6+
  • BlackBerry browser 10+

参考链接

这里是一篇文章，作者是Mozilla的David Walsh，介绍了Internet Explorer特定的滤镜效果，例如动态模糊。

.blur { filter:blur(add = 0, direction = 300, strength = 10); }

看起来Internet Explorer的常规模糊支持并不稳定，我并不感到意外，特别是在9之前的版本。

那么其他浏览器有没有其他的方法？ - Thomas Lai
@IdanShechter 我也是。我本来期望能用SVG滤镜或者"filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');"来实现，但它们都没有起作用，让我有些失望。 - Pawel
1
你可以在基于Gecko的浏览器中实现SVG模糊滤镜。但是你上面的内容只适用于WebKit，而且没有标准化，因此没有其他人支持它。
它作为W3C工作草案可用，http://www.w3.org/TR/filter-effects/#ltfilter-functiongt。最新的编辑草案在此处：https://dvcs.w3.org/hg/FXTF/raw-file/default/filters/index.html#FilterProperty。 - Erik Dahlström
当然，但这并不意味着“标准化”。你和我都知道工作草案的门槛非常低。 - Boris Zbarsky
我添加了链接以帮助贴纸人不确定在哪里查找参考资料 - 工作草案意味着任何事情仍然可能改变（应该预期到这一点）。我从未声称它意味着“标准化”。现在它可能只在WebKit中实现，但这将有所改变。 - Erik Dahlström
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接