Javascript 使用 CSS 模糊 HTML 中的 Img 和 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8514954/
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
Blur Img's & Div's in HTML using CSS
提问by sazr
Is it possible to apply a blur to an HTML element(div & img)?
是否可以对 HTML 元素（div 和 img）应用模糊？
I am developing solely for the iPad so cross-browser compatibility is not an issue & I can use HTML5 CSS3 techniques.
我只为 iPad 开发，所以跨浏览器兼容性不是问题，我可以使用 HTML5 CSS3 技术。
I know how to blur text but this CSS doesn't blur the actual HTML element or its border:
我知道如何模糊文本，但此 CSS 不会模糊实际的 HTML 元素或其边框：
text-shadow: 0 0 8px #000;
color: transparent;
I googled this but it doesn't blur the image in my browsers:
我用谷歌搜索了这个，但它不会模糊我浏览器中的图像：
filter: blur(strength=50);
采纳答案by Jasper
I saw a cool tutorial today about blurring content with CSS box-shadows, text-shadows, opacity, and color.
我今天看到了一个很酷的教程，关于使用 CSS box-shadows、text-shadows、opacity 和 color模糊内容。
Here's the demo: http://tympanus.net/Tutorials/ItemBlur/
这是演示：http: //tympanus.net/Tutorials/ItemBlur/
And the tutorial: http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/
和教程：http: //tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/
回答by bafromca
Webkit has a property called -webkit-filterthat allows for the techniques of blurring: -webkit-filter: blur(15px);
Webkit 有一个属性叫做-webkit-filter允许模糊技术：-webkit-filter: blur(15px);
回答by Daniel Filho
You can simply add this to your css, for an image:
您可以简单地将其添加到您的 css 中，用于图像：
In the following example, you'll be using a blur with 5 pixels of radius. And it is extremely importantto use all vendor prefixes available, so it works on all browsers with this feature implemented, untile it comes to a "stable" version.
在以下示例中，您将使用半径为 5 个像素的模糊效果。它是非常重要的使用所有可用的供应商前缀，所以它的工作原理与实现此功能的所有浏览器，取消平铺它涉及到一个“稳定”的版本。
img{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}
回答by Purag
I think the best way is to layer the same image over itself a few times and test different positioning and opacities on the overlayed ones.
我认为最好的方法是将相同的图像叠加几次，并在叠加的图像上测试不同的定位和不透明度。
Here's the CSS that I came up with. Keep in mind I'm using the nth-childCSS3 selector (but you don't seem to have an issue with that):
这是我想出的 CSS。请记住，我正在使用nth-childCSS3 选择器（但您似乎对此没有问题）：
img {
width:300px;
height:300px;
position:absolute;
opacity:0.2;
}
.container {
position:relative;
overflow:hidden;
width:300px;
height:300px;
}
img:nth-child(1) {
opacity:1;
}
img:nth-child(2) {
left:2px;
top:2px;
}
img:nth-child(3) {
left:-2px;
top:-2px;
}
img:nth-child(4) {
left:-1px;
top:-1px;
}
img:nth-child(5) {
left:1px;
top:1px;
}
HTML:
HTML：
<div class="container">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
</div>
The resultis pretty promising.
结果很有希望。
回答by bookcasey
CSS does not have the ability to blur, besides techniques with text-shadowand box-shadow. But even with these, borders and images aren't able to be blurred.
除了使用text-shadow和 的技术外，CSS 没有模糊的能力box-shadow。但即使有这些，边界和图像也无法模糊。
This JavaScript library, however, can handle images.
然而，这个 JavaScript 库可以处理图像。
Also, you may find this techniqueinteresting. It's a neat illusion using pre-fabricated blurry images.
此外，您可能会发现这种技术很有趣。这是使用预制模糊图像的巧妙错觉。
回答by Chris Fritz
I had to pretty thoroughly research this problem not too long ago and came up with an extremely flexible solution, though it may be overkill for some people's needs. I needed not only blurred images, but also a dynamic blur radius, overlay color, and overlay opacity for various kinds of images. I also needed to have the option of just blurring an image in a background with other elements overlayed on top of it. Here's the best cross-browser (and performant) solution I was able to create.
不久前我不得不彻底研究这个问题，并提出了一个非常灵活的解决方案，尽管对于某些人的需求来说这可能有点过分。我不仅需要模糊图像，还需要各种图像的动态模糊半径、叠加颜色和叠加不透明度。我还需要选择仅模糊背景中的图像，并在其上叠加其他元素。这是我能够创建的最好的跨浏览器（和高性能）解决方案。
First, I'd have an SVG on hand, uninspiringly called blur.svg. It applies a blur filter and if you look closely, the stdDeviation(which sets the blur radius) is actually set programmatically from a passed in parameter to the URL requesting the asset.
首先，我手头有一个 SVG，没有灵感地叫做blur.svg. 它应用了一个模糊过滤器，如果你仔细观察，stdDeviation（设置模糊半径）实际上是从传入的参数到请求资产的 URL 以编程方式设置的。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="#{params[:blur]}" />
</filter>
</svg>
Then I had an SCSS mixin that would allow one to add a blur overlay to any wrapper, with a customizable blur radius, overlay color, and overlay opacity.
然后我有了一个 SCSS mixin，它允许向任何包装器添加模糊覆盖，具有可自定义的模糊半径、覆盖颜色和覆盖不透明度。
@mixin background_blurred($blur_radius:4, $overlay_color:white, $overlay_opacity:0.6) {
position: relative;
.background_blurred {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
filter: url('blur.svg#blur?blur=#{$blur_radius}');
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='#{$blur_radius}');
transform: translateZ(0);
&:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: $overlay_color;
opacity: $overlay_opacity;
}
}
.foreground {
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
}
You may be wondering why I included a transform: translateZ(0);. The only effect that has is to force hardware acceleration on the render to keep things performant. You may also be wondering why there are no vendor prefixes. You can look up things like filteron CanIUseif you want, but I used autoprefixeron this project to worry about that stuff for me. And of course, why filter using this SVG, rather than with something like blur(4px)? Wouldn't that be easier? It would, but Firefox (as of writing) only supports the filterproperty with a URL.
你可能想知道为什么我包含一个transform: translateZ(0);. 唯一的效果是在渲染上强制硬件加速以保持性能。您可能还想知道为什么没有供应商前缀。如果你愿意，你可以filter在CanIUse上查找类似的东西，但我在这个项目中使用了autoprefixer来为我担心这些东西。当然，为什么要使用这个 SVG 进行过滤，而不是使用类似的东西blur(4px)？那不是更容易吗？它会，但 Firefox（在撰写本文时）仅支持filter带有 URL的属性。
Then you can apply the blur mixin to a wrapper class:
然后您可以将模糊混合应用于包装类：
.my_wrapper_class {
@include background_blurred(3, #f9f7f5, 0.7);
}
Notice that for this method, we have to use a class with a custom background set in a style attribute instead of an image tag with a src. You can tweak the background position and override the background size to your liking.
请注意，对于此方法，我们必须使用在 style 属性中设置自定义背景的类，而不是带有 src 的图像标签。您可以根据自己的喜好调整背景位置并覆盖背景大小。
<div class="my_wrapper_class">
<div class="background_blurred" style="background: url('URL OF IMAGE TO BLUR') no-repeat; background-position: 50% 0;"></div>
<div class="foreground">
<p>Stuff that should appear above the blurred background and not be blurred.</p>
</div>
</div>
回答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 live demo and complete source code here
在此处查看实时演示和完整源代码
http://purpledesign.in/blog/adjust-an-image-using-css3-html5/
http://purpledesign.in/blog/adjust-an-image-using-css3-html5/
See the following code for more details.
有关更多详细信息，请参阅以下代码。
To make an image gray:
要使图像变灰：
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
To give a sepia look:
给一个棕褐色外观：
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
}
To adjust brightness:
调整亮度：
img {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
}
To adjust contrast:
调整对比度：
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
To Blur an image:
要模糊图像：
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
