CSS or JavaScript Div Blur magic

CSS or JavaScript Div Blur magic

本文关键字：Blur magic Div JavaScript or CSS      更新时间：2023-09-26

好的，所以新版本的iCloud网站已经出来了。它似乎有一些疯狂的巫毒苹果魔法正在发生。他们能够模糊登录屏幕后面的背景图标，我不知道他们是怎么做到的。它不是静态图像，因为如果您调整浏览器大小，图标会更改大小。

有人可以解释一下吗？

https://www.icloud.com/

我认为您可以使用 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）' 在对象上引用它

编辑

可以使用模糊 CSS 来完成

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

你可以

使用BlurJs来做到这一点，看看演示：http://www.blurjs.com/simpledemo.html

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

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

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

相关文章：