如何使用css的backdrop-filter样式,或者替代方法?

发布网友发布时间：2022-04-06 11:18

共2个回答

热心网友时间：2022-04-06 12:48

filter:blur(0px)
可以加一些前缀使其兼容

如有疑问欢迎追问

追问这个是当前元素的模糊，想要的是除当前元素外的其他元素的模糊。可以用filter实现一幅图片的部分毛玻璃效果，但是不能多个元素同时模糊。

追答懂你意思了你浮窗出现之前在出现一个div是整个屏幕大小然后设置模糊固定定位然后你的浮窗z-index设置的比div大就可以了
这里我简写为你提供一下思路
div position:fixed z-index:2 filter:blur(20px) width:屏宽 height:屏高
浮窗 z-index:99

热心网友时间：2022-04-06 14:06

先说结论：无论用filter还是backdrop-filter方案，都无法完美；
filter方案：其本身是模糊自己，而不是模糊被弹窗遮挡的元素。而且实现起来必须要有一个单独的层，用来实现毛玻璃效果；可是这个毛玻璃的效果，不会随着被遮挡层的内容变化而变化。优点是兼容性好，缺点是被遮挡内容必须是固定不变的。本质上属于障眼法，完全不解决问题；
backdrop-filter方案：优点是完美解决需求，就是要的这个样子，实现只需两行代码。缺点很要命，ie直接不支持（edge貌似可以）；其他桌面浏览器只有在比较高级的版本才支持；
作为前端工程师，应该惩前毖后，对于ie这种老古董冥顽不化的，直接要抛弃。要么升级电脑，要么不要想在ie实现功能；