javascript - CSS 或 JavaScript Div 模糊魔法

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

您可以对画布内容进行所有模糊处理。