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

Posted 2023-02-21

【中文标题】过滤器：模糊（1px）；不适用于 Firefox、Internet Explorer 和 Opera

【英文标题】：filter: blur(1px); doesn't work in Firefox, Internet Explorer, and Opera

【发布时间】：2013-03-26 01:12:10

【问题描述】：

我的 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 中根本不会出现模糊。那些浏览器支持吗？还是有其他方法可以让整个页面变得模糊？

【问题讨论】：

现在它确实在 Firefox35+ 中工作

【参考方案1】：

这听起来不错，目前支持：

Chrome 18+ Chrome for android 25+ Safari 6+ ios Safari 6+ 黑莓浏览器 10+

Reference

Here is an article 来自 David Walsh（在 Mozilla 工作），用于 Internet Explorer 特定过滤器，例如 t 运动模糊：

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

不过，Internet Explorer 对正常模糊的支持似乎并不完善，我并不感到惊讶，尤其是 9 之前的版本。

【讨论】：

那么其他浏览器还有其他方法吗？

@IdanShechter 在这里也一样。我期待这一点，但我想对 SVG 过滤器或“filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');”感到非常惊讶但他们也没有工作。

【参考方案2】：

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

【讨论】：

它以 W3C 工作草案的形式提供，w3.org/TR/filter-effects/#ltfilter-functiongt。最新编辑草稿在这里：dvcs.w3.org/hg/FXTF/raw-file/default/filters/….

当然，但这并不意味着“标准化”。你和我都知道工作草案的门槛非常低。

我添加了有用的链接，因为发帖者似乎不确定在哪里寻找参考 - 工作草案意味着任何事情仍然可以改变（这应该是意料之中的）。我从未声称这意味着“标准化”。它现在可能只在 WebKit 中实现，但希望会有所改变。

【参考方案3】：

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

【讨论】：

这对我有用。还值得注意的是，您可以在不添加 svg 文件的情况下使用此内联代码，只需粘贴代码并改用格式 url(#blur)。我的例子：jsbin.com/ulufot/31/edit

对于 IE8，您必须使用 feGaussianBlur stdDeviation="3"></feGaussianBlur>。

更好 (imo): .svg-only-blur filter: url("data:image/svg+xml;utf8,#blur");

在 chrome&FF 上工作，但在 IE11 上没有，我试过@calvintennant 评论，也没有用

【参考方案4】：

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

【参考方案5】：

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

【讨论】：

StackBlur 更好

【参考方案6】：

我尝试了上述所有方法，但像往常一样，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）：

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>