通过 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);

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

Answer 2

使用纯 CSS

1.对于矩形图像

Demo 1

---

2.对于圆角图片

Demo 2

---

使用 HTML5

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
}

代码来自HTML5rocks。也可以访问了解更多

Answer 3

我没有使用这个产品，但它看起来有点像你想要实现的： 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 4

到目前为止，真正的 CSS 模糊只有 supported in Webkit，而且仍然有很多错误，所以不是一个真正的选择。话虽如此，它无论如何也对你没有太大帮助，因为它只能模糊一个元素本身 - 而不是它背后的其他元素。要模拟这种效果，您实际上必须将相同背景的单独图像堆叠并分层 2 层，一张清晰，一张模糊，并手动确定要在哪里显示哪一张。

如果您有空的话，您可能还想read this topic 和this page is an awesome read。但它的管理总结很能说明问题：

很高兴看到这在今天的 WebKit/Blink 中成为可能。但是（总是有一个但是）这种技术还没有准备好投入生产。虽然它在桌面上运行良好，但目前在 iOS7 上无法运行，它慢并且滚动无法运行。

Answer 5

您要做的是创建一个透明的.gif 或.png 文件，然后将其设置为background-image 在您想要赋予frosted 效果的任何div 上。这样它会覆盖 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/