我的 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 中根本不会出现模糊。那些浏览器支持吗？还是有另一种让整个页面模糊的方法？
问问题
78856 次
6 回答
45
尝试使用 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>于 2013-04-04T14:00:13.107 回答
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');
于 2014-10-23T10:09:53.527 回答
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>于 2015-08-06T00:36:30.427 回答
7
我尝试了上述所有方法，但像往常一样，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);检测 Internet Explorer / Microsoft Edge 是否正在使用此 JavaScript（感谢 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 的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 + ')');加载并模糊后，我使用 CSS 和透明度类将其淡化，因为 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>于 2016-11-10T16:20:10.497 回答
3
1
您可以在基于 Gecko 的浏览器中执行 SVG 模糊过滤器。但是你上面的东西是仅限 WebKit 而不是标准化的，所以没有其他人支持它。
于 2013-04-04T06:23:47.483 回答