让Firefox支持backdrop-filter高斯模糊

知更鸟 实用技巧评论279阅读模式

通过backdrop-filter: blur(3px);可以做出类似毛玻璃模糊特效。

但火狐默认不支持 backdrop-filter: blur()模糊属性文章源自知更鸟-https://zmingcx.com/firefox-backdrop-filter.html

在火狐浏览器地址栏输入about:config,回车之后页面出现输入框
在输入框内输入layout.css.backdrop-filter.enabled
点击右侧的切换按钮切换为 true文章源自知更鸟-https://zmingcx.com/firefox-backdrop-filter.html

一些早期的版本修改了也没用,可以通过下面的判断另写样式文章源自知更鸟-https://zmingcx.com/firefox-backdrop-filter.html

@supports not (backdrop-filter: blur(15px)) {
	样式
}

至于火狐为什么默认不打开这个设置,让人莫名其妙。文章源自知更鸟-https://zmingcx.com/firefox-backdrop-filter.html

另外,如果与文章源自知更鸟-https://zmingcx.com/firefox-backdrop-filter.html

transform: translate(-50%, -50%);

同时使用,火狐中也无效...文章源自知更鸟-https://zmingcx.com/firefox-backdrop-filter.html 文章源自知更鸟-https://zmingcx.com/firefox-backdrop-filter.html

匿名

回复问题

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定