Question

我遇到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中根本不显示模糊。这些浏览器是否支持它？或者是否有其他方法可以让整个页面变得模糊？

Answer 1

尝试使用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://i.stack.imgur.com/oURrw.png" />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg>

Answer 2

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');

Answer 3

这是一种新颖的模糊技术，适用于所有浏览器（包括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>

演示： http://codepen.io/rkogan/pen/jPdGoM/

Answer 4

我尝试了以上所有方法，但是像往常一样，Internet Explorer / Microsoft Edge希望以不同的方式做事，所以我无法使其保持一致。

最后，我不得不跳过一系列的箍，让它在我想要的所有现代浏览器中运行：

使用已经提到的CSS，这样它就可以在非IE浏览器上运行，而不需要我用于IE的修复开销：

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

使用this JavaScript检测是否正在使用Internet Explorer / Microsoft Edge（感谢Mario）。
如果检测到Internet Explorer / Microsoft Edge，则将图像加载到页面上隐藏的img字段中。在操作前必须使用onload功能make sure the image has loaded执行此操作，否则下一步失败（感谢Josh Stodola）：
```
var img = new Image();
img.onload = function() { blurTheImage(); }
img.src = "http://path/to/image.jpg";
```

使用适用于IE和Edge的StackBlur JavaScript（感谢Mario Klingemann）。图像应该由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);
}

碰巧我想设置为背景，所以我必须在设置数据之前转换图像（感谢user3817470）：

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

一旦加载并模糊，我就会在using CSS and a transparency class中淡化它，因为jQuery fadeTo看起来并不好（感谢Rich Bradshaw）：
```
$('#background-image').toggleClass('transparent');
```

它的一个样本（感谢Alex78191）：

＆＃13;

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';
}

＆＃13;

img {
  filter: blur(4px);
  display: none;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.0/stackblur.js"></script>
<img id="img-for-blur" data-src="https://i.stack.imgur.com/oURrw.png">
<canvas id="ie-canvas"></canvas>

＆＃13;

Answer 5

听起来不对，目前支持：

Chrome 18 +
Chrome for Android 25 +
Safari 6 +
iOS Safari 6 +
BlackBerry浏览器10 +

Reference

来自David Walsh（在Mozilla工作）的

Here is an article在Internet Explorer特定过滤器上，例如t motion blur：

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

看起来普通的模糊支持在Internet Explorer中看起来不完整，但我并不感到惊讶，特别是在9之前。

Answer 6

您可以在基于Gecko的浏览器中执行SVG模糊过滤器。但是你上面的东西只是WebKit而不是标准化的，所以没有其他人支持它。

filter：blur（1px）;在Firefox，Internet Explorer和Opera中不起作用

6 个答案: