CSS或JavaScript Div Blur magic

Question

好的，所以iCloud网站的新版本已经发布了。它似乎是一些疯狂的伏都教苹果魔法正在发生。他们能够模糊登录屏幕后面的背景图标，我无法弄清楚他们是如何做到的。它不是静态图像，因为如果您调整浏览器大小，图标会改变大小。

请有人解释一下吗？

https://www.icloud.com/

Answer 1

我认为你可以用css实现！请查看

http://www.w3schools.com/svg/svg_fegaussianblur.asp

你可以通过声明它们来使用很多不同的过滤器

<filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>

这些可以是黑白滤镜，冷色调等。从那里只使用filter ='url（＃f1）'

在对象上引用它

编辑

可以使用BLUR CSS完成

http://jsfiddle.net/SvH6w/6/

Answer 2

您可以使用BlurJs执行此操作，请查看演示：http://www.blurjs.com/simpledemo.html

Answer 3

他们正在使用画布并将其设置为背景图像

/* from the page: */
background-image: -webkit-canvas(blurredDerivativeForButtonsc245);

你可以在画布内容上做所有模糊。