通过 CSS 模糊图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13681857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blurring an image via CSS?
提问by user776686
On many smartphones (Samsung Galaxy II being an example) when you browse through a photo gallery, its blurred copy is laid out in the background. Can this be achieved by CSS dynamically (ie. without the copy of the photo being prepared upfront saved)? Is there any kind of complex CSS image filter to blur an image?
在许多智能手机上（以三星 Galaxy II 为例），当您浏览照片库时，其模糊副本会显示在背景中。这可以通过 CSS 动态实现吗（即，无需预先准备好照片的副本保存）？是否有任何复杂的 CSS 图像过滤器来模糊图像？
采纳答案by Andy
You can use CSS3 filters. They are relatively easy to implement, though are only supported on webkit at the minute. Samsung Galaxy 2's browser should support though, as I think that's a webkit browser?
您可以使用CSS3 过滤器。它们相对容易实现，但目前仅在 webkit 上受支持。三星 Galaxy 2 的浏览器应该支持，因为我认为这是一个 webkit 浏览器？
回答by Raj Sharma
With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image.
使用 CSS3，我们可以轻松调整图像。但请记住，这不会改变图像。它只显示调整后的图像。
See the following code for more details.
有关更多详细信息，请参阅以下代码。
To make an image gray:
要使图像变灰：
img {
-webkit-filter: grayscale(100%);
}
To give a sepia look:
给一个棕褐色外观：
img {
-webkit-filter: sepia(100%);
}
To adjust brightness:
调整亮度：
img {
-webkit-filter: brightness(50%);
}
To adjust contrast:
调整对比度：
img {
-webkit-filter: contrast(200%);
}
To Blur an image:
要模糊图像：
img {
-webkit-filter: blur(10px);
}
You should also do it for different browser. That is include all css statements
您还应该为不同的浏览器执行此操作。即包括所有 css 语句
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
To use multiple
要使用多个
filter: blur(5px) grayscale(1);
回答by sameeuor
This code is working for blur effect for all browsers.
此代码适用于所有浏览器的模糊效果。
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
回答by JacobG182
Yes there is using the following code will allow you to apply a blurring effect to the specified image and also it will allow you to choose the amount of blurring.
是的，使用以下代码将允许您对指定图像应用模糊效果，并且它还允许您选择模糊量。
img {
-webkit-filter: blur(10px);
filter: blur(10px);
}
回答by Bar Horing
img {
filter: blur(var(--blur));
}
回答by Aneesh
CSS3 filters currently work only in webkit browsers (safari and chrome).
CSS3 过滤器目前仅适用于 webkit 浏览器（safari 和 chrome）。
