使用div模糊背后的图像?

Dr *_*nik 17 html css webkit blur

是否可以对div进行编码以使其模糊其下的任何图像?

这样的事情:

在此输入图像描述

这可能以某种方式完成-webkit吗?

Dre*_*Dre 29

不是单独使用CSS,但是你可以使用Canvas和StackBlurforCanvas库来实现类似的效果.看到这个

更新:看起来backdrop-filter最近推出夜间WebKit的,所以最终我们就可以只用CSS来做到这一点.好极了!

  • 有关`backdrop-filter`的支持,请参阅:http://caniuse.com/#feat=css-backdrop-filter (10认同)
  • `backdrop-filter` 现在可以在所有主要浏览器中使用(2019 年 8 月) (3认同)
  • @magikMaker 目前 Firefox 不支持,但他们正在研究 https://bugzilla.mozilla.org/show_bug.cgi?id=1178765 (2认同)

Tim*_*zer 5

不幸的是,这不能完全使用 CSS 来完成。虽然 webkit-filter 支持模糊,但它不支持模糊它所应用的元素以外的任何东西。

有一种更hacky的方法来做到这一点,这里描述 - http://css-tricks.com/blurry-background-effect/

  • 哦,这是一种耻辱,没关系!会是一个不错的功能 (2认同)