CSS 过滤器：模糊（1px）；不适用于 Firefox、Internet Explorer 和 Opera

Question

提问by Thomas Lai

I have a problem with CSS. When I try to do

我的 CSS 有问题。当我尝试做

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

it looks perfect in Safari and Chrome, but the blur doesn't show up at all in Firefox, Opera, or Internet Explorer. Do those browsers support it? Or is there another method of getting the entire page to blur?

它在 Safari 和 Chrome 中看起来很完美，但在 Firefox、Opera 或 Internet Explorer 中根本不显示模糊。那些浏览器支持吗？或者是否有另一种方法可以使整个页面变得模糊？

Answer 1

回答by Arpad Bajzath

Try with SVG filter.

尝试使用 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

回答by rostber

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

回答by Rob Kogan

Here is a novel blur technique that works across all browsers (including Internet Explorer 10/11)and doesn't require filters, canvas, or JavaScript.

这是一种适用于所有浏览器（包括 Internet Explorer 10/11）并且不需要过滤器、画布或 JavaScript的新颖模糊技术。

The basic technique is to scale down the image size, and then use a 3D-scaling matrix on the parent to zoom back to full size. This effectively downsamples the image and does a rough blurring effect.

基本技术是缩小图像尺寸，然后在父级上使用 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/

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

Answer 4

回答by SharpC

I tried all the above methods, but as usual Internet Explorer / Microsoft Edge wanted to do things differently so I couldn't get it consistent.

我尝试了上述所有方法，但像往常一样，Internet Explorer / Microsoft Edge 想要做不同的事情，所以我无法保持一致。

In the end I had to jump through a series of hoops to get it working how I wanted across all modern browsers:

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

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);
```
Detect whether Internet Explorer / Microsoft Edge was being used using this JavaScript(thanks Mario).
If Internet Explorer / Microsoft Edge was detected then load the image into a hidden imgfield on the page. You have to do this using the onloadfunction to make sure the image has loadedbefore 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";
```

Use StackBlurJavaScript 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);
}

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

Once loaded and blurred I then faded it in using CSS and a transparency classas jQuery fadeTowasn't looking great (thanks Rich Bradshaw):
```
$('#background-image').toggleClass('transparent');
```

使用已经提到的 CSS，这样它就可以在非 IE 浏览器上运行，而不会产生我必须用于 IE 的修复程序的开销：
```
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
```
使用此 JavaScript检测是否正在使用 Internet Explorer / Microsoft Edge （感谢 Mario）。
如果检测到 Internet Explorer / Microsoft Edge，则将图像加载到img页面上的隐藏字段中。您必须使用该onload函数执行此操作，以确保在对图像进行操作之前已加载图像，否则下一步将失败（感谢 Josh Stodola）：
```
var img = new Image();
img.onload = function() { blurTheImage(); }
img.src = "http://path/to/image.jpg";
```

使用适用于 IE 和 Edge 的StackBlurJavaScript（感谢 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 + ')');

加载并模糊后，我使用 CSS 和透明类将其淡化，因为 jQueryfadeTo看起来不太好（感谢 Rich Bradshaw）：
```
$('#background-image').toggleClass('transparent');
```

Phew, I think I need a tea break (or perhaps something much stronger!).

呼，我想我需要休息一下（或者可能更强烈！）。

A sample of it working (thanks Alex78191):

它的工作示例（感谢 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://i.stack.imgur.com/oURrw.png">
<canvas id="ie-canvas"></canvas>

Answer 5

回答by Daniel Imms

That sounds about right, and it is currently supported in:

这听起来是对的，目前支持：

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

铬 18+
安卓版 Chrome 25+
野生动物园 6+
iOS Safari 6+
黑莓浏览器 10+

Reference

参考

Here is an articlefrom David Walsh (works at Mozilla) on Internet Explorer specific filters, for example t motion blur:

这是David Walsh（在 Mozilla 工作）关于 Internet Explorer 特定过滤器的文章，例如 t 运动模糊：

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

It looks like normal blurring support is patchy with Internet Explorer though and I'm not surprised, especially pre-9.

看起来正常的模糊支持在 Internet Explorer 中是不完整的，我并不感到惊讶，尤其是 9 之前的版本。

Answer 6

回答by Boris Zbarsky

You can do an SVG blur filter in Gecko-based browsers. But the thing you have above is WebKit-only and not standardized, so no one else supports it.

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

CSS 过滤器：模糊（1px）；不适用于 Firefox、Internet Explorer 和 Opera

提问by Thomas Lai

回答by Arpad Bajzath

回答by rostber

回答by Rob Kogan

回答by SharpC

回答by Daniel Imms

回答by Boris Zbarsky

相关推荐

最近更新

标签

CSS 过滤器：模糊（1px）；不适用于 Firefox、Internet Explorer 和 Opera

提问by Thomas Lai

回答by Arpad Bajzath

回答by rostber

回答by Rob Kogan

回答by SharpC

回答by Daniel Imms

回答by Boris Zbarsky

相关推荐

CSS 我可以用 SASS \ Compass 计算和使用元素高度吗

CSS 当用户将鼠标悬停在列表项上时，将光标变成一只手

CSS 使用 flexbox 垂直居中项目

CSS 显示：内联与显示：块

相关推荐

最近更新

标签