通过CSS / javascript模糊对div的影响？

Question

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

对于div元素背后的内容，我想获得类似于icloud.com的磨砂玻璃效果。我在网上看了一遍，却找不到那样做的东西。

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

谢谢，

Answer 1

icloud.com直接为这些图标使用模糊图像，但如果您想要在渲染页面时创建模糊的内容，则可以使用css3滤镜模糊来实现此目的。

您需要的只是一张图像，显示您需要模糊的内容并将这些线应用于您想要模糊的图像。

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

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

Answer 2

我没有使用这个产品，但它看起来有点像你想要实现的： http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

---

另一种解决方案：

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

---

编辑＃2：

模糊元素：

示例：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);
}

查看此页面以了解它将使用的浏览器： http://caniuse.com/css-filters

它似乎不适用于IE。

Answer 3

使用纯CSS

1。对于矩形图像

Demo 1

---

2. 对于圆角图像

Demo 2

---

使用HTML5

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

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
}

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

Answer 4

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

这是一个应该有用的类似示例：How to give outer glow to an object in a transparent png using CSS3?

（另外，你想让blur效果让很多人感到困惑，因为blur意味着当你失去对象的焦点时。所以，也许你应该把它称为frosted效果，而不是blur。）

---

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

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

Answer 5

真正的CSS模糊到目前为止只有supported in Webkit，而且仍然非常多，所以不是一个真正的选择。话虽如此，它无论如何都不会对你有所帮助，因为它本身只能模糊一个元素 - 而不是它背后的其他元素。要模拟这种效果，你必须有效地叠加和分层2个相同背景的图像，一个清晰，一个模糊，并手动确定哪一个显示在哪里。

如果您有空闲时间，您可能还需要read this topic和this page is an awesome read。但其管理摘要告诉我们：

  

今天在WebKit / Blink中看到这是可能的很有趣。但是（总有一个但是）这种技术尚未准备好生产。虽然它在桌面上工作得很好，但目前还没有在iOS7上运行，它慢而且滚动无法正常工作。