通过 CSS/javascript 对 div 产生模糊效果？

Blur effect on div via CSS/javascript?

提问by dmr07

Forgive me if this sounds like a dumb question/awkward wording - I'm in the process of learning to code.

如果这听起来像一个愚蠢的问题/尴尬的措辞，请原谅我 - 我正在学习编码。

I'd like to get a frosted glass effect similar to that of icloud.com for the content behind the div element. I've looked all over the web and was unable to find anything that does that.

我想为 div 元素后面的内容获得类似于 icloud.com 的磨砂玻璃效果。我已经浏览了整个网络，但找不到任何可以做到这一点的东西。

I'd like to know if this is possible, and if it is, how to do it.

我想知道这是否可能，如果可能，该怎么做。

Thanks,

谢谢，

回答by shadyinside

icloud.comdirectly uses blurred images for those icons but if u want to create something to be blurred when the page is rendered, you can use css3 filter blur for that purpose.

icloud.com直接为这些图标使用模糊图像，但如果你想在页面呈现时创建一些模糊的东西，你可以为此使用 css3 过滤器模糊。

All you need is a image of what you need to blur and apply these lines on which image you want to blur.

您只需要一张需要模糊的图像，然后将这些线条应用到要模糊的图像上。

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

You can change the values of course.And if you want to blur other elements than images, let me know in the comments. There is a jquery plugin for that.

您当然可以更改值。如果您想模糊图像以外的其他元素，请在评论中告诉我。有一个 jquery 插件。

回答by Zword

Using pure CSS

使用纯 CSS

1.For rectangular images

1.对于矩形图像

Demo 1

演示 1

---

---

2.For round corner images

2.对于圆角图像

Demo 2

演示 2

---

---

Using HTML5

使用 HTML5

3.On Inspecting Elements of the site icloud.comi came to know that the blurred images are generated in an HTML5 Canvas tag.Therefore i googled it and found the following tutorial.Below is the code from that tutorial:

3.在检查网站元素时，icloud.com我知道模糊图像是在HTML5 Canvas 标签中生成的。因此我用谷歌搜索并找到了以下教程。以下是该教程中的代码：

var grayscale = Filters.filterImage(Filter.grayscale, image);
// Note that ImageData values are clamped between 0 and 255, so we need
// to use a Float32Array for the gradient values because they
// range between -255 and 255.
var vertical = Filters.convoluteFloat32(grayscale,
  [ -1, 0, 1,
    -2, 0, 2,
    -1, 0, 1 ]);
var horizontal = Filters.convoluteFloat32(grayscale,
  [ -1, -2, -1,
     0,  0,  0,
     1,  2,  1 ]);
var final_image = Filters.createImageData(vertical.width, vertical.height);
for (var i=0; i<final_image.data.length; i+=4) {
  // make the vertical gradient red
  var v = Math.abs(vertical.data[i]);
  final_image.data[i] = v;
  // make the horizontal gradient green
  var h = Math.abs(horizontal.data[i]);
  final_image.data[i+1] = h;
  // and mix in some blue for aesthetics
  final_image.data[i+2] = (v+h)/4;
  final_image.data[i+3] = 255; // opaque alpha
}

Code from HTML5rocks.Also visit to know more

来自HTML5rocks 的代码。另请访问以了解更多信息

回答by mogosselin

I didn't use this product but it seems a little like what you want to acheive : 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/

---

---

Another solution :

另一个解决方案：

Depending on what is "blurry" on your page, if it never changes, you could also just make an blurry image of that in Photoshop and load it on your DIV when you need too.

根据页面上“模糊”的内容，如果它永远不会改变，您也可以在 Photoshop 中制作一个模糊的图像，并在需要时将其加载到您的 DIV 中。

---

---

Edit #2 :

编辑#2：

The blur Element :

模糊元素：

Example : http://davidwalsh.name/css-filters

示例：http: //davidwalsh.name/css-filters

.backgroundblur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

Check out this page to know on what browser it will work : http://caniuse.com/css-filters

查看此页面以了解它将在哪种浏览器上工作：http: //caniuse.com/css-filters

It doesn't seems to work on IE.

它似乎不适用于 IE。

回答by Control Freak

What you want to do is create a transparent .gifor .pngfile and then set it as a background-imageon any div you want to give that frostedeffect to. That way it overlays the div, and shows the frosted effect over it, and anything in the div will show through the transparent part of the png.

您想要做的是创建一个透明.gif或.png文件，然后将其设置为background-image您想要赋予该frosted效果的任何 div 。这样它会覆盖 div，并在其上显示磨砂效果，div 中的任何内容都将通过 png 的透明部分显示。

This is a similar example which should help: How to give outer glow to an object in a transparent png using CSS3?

这是一个类似的例子，应该会有所帮助：如何使用 CSS3 为透明 png 中的对象提供外部发光？

(Also, saying you want a blureffect confuses many people, since blurmeans when you lose focus of an object. So, maybe you should call it frostedeffect, instead of blur.)

（另外，说你想要一个blur效果会让很多人感到困惑，因为这blur意味着当你失去一个物体的焦点时。所以，也许你应该称之为frosted效果，而不是blur。）

---

---

I made this 30% transparent layer .png image that should do a frost effect on any div you apply it to:

我制作了这个 30% 透明层 .png 图像，它应该对你应用它的任何 div 产生霜冻效果：

And you can see an example here: http://jsfiddle.net/n26Vf/

你可以在这里看到一个例子：http: //jsfiddle.net/n26Vf/

回答by Niels Keurentjes

Real CSS blurring is so far only supported in Webkit, and still quite buggy, so not really an option. Having said that, it wouldn't quite help you anyway since it can only blur an element itself - not other elements behind it. To emulate this effect, you'd effectively have to stack and layer 2 separate images of the same background, one crisp and one blurred, and manually determine which one to show where.

到目前为止，真正的 CSS 模糊仅在 Webkit 中受支持，并且仍然存在很多问题，因此不是一个真正的选择。话虽如此，无论如何它都不会帮助你，因为它只能模糊一个元素本身 - 而不是它背后的其他元素。要模拟这种效果，您必须有效地堆叠和分层 2 个具有相同背景的独立图像，一个清晰，一个模糊，并手动确定要显示的位置。

You probably also want to read this topic, and this page is an awesome readif you have time to spare. But its management summary is telling:

您可能还想阅读这个主题，如果您有空闲时间，这个页面是一个很棒的阅读。但它的管理摘要告诉我们：

It's fun to see that this is possible today in WebKit/Blink. But (there is always is a but) this technique is not ready for production. Though it's working quite well on the desktop it's not working on iOS7 at the moment, it's slowand scrolling is not workingat all.

很高兴看到今天在 WebKit/Blink 中这是可能的。但是（总是有一个但是）这种技术还没有准备好用于生产。虽然它在桌面上运行得很好，但目前在 iOS7 上不起作用，它很慢而且滚动根本不起作用。