HTML – CSS:解决方案到背景过滤器?
发布时间:2020-12-14 21:26:08 所属栏目:资源 来源:网络整理
导读:backdrop-filter是最新的css功能,在现代浏览器中尚未提供(至少截至2016年7月1日)。 Chrome 51通过Experimental Web Platform标志支持背景滤镜。 Safari 9.1支持–webkit-前缀 Firefox 47不支持 处于这样一个无法使用的状态,我想知道是否有任何其他方法可以
backdrop-filter是最新的css功能,在现代浏览器中尚未提供(至少截至2016年7月1日)。
> Chrome 51通过Experimental Web Platform标志支持背景滤镜。 处于这样一个无法使用的状态,我想知道是否有任何其他方法可以带来相同的结果。 JS的模糊,灰度等工作区也很受欢迎 可以通过https://bugs.chromium.org/p/chromium/issues/detail?id=497522跟踪背景滤波器的开发 解决方法
我不知道你是否还在追问这个问题,但对于未来的其他用户:
这个效果可以通过CSS Pseudo-Classes实现如下,不需要JavaScript! body,main::before { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed; } main { margin: 100px auto; position: relative; padding: 10px 5px; background: hsla(0,0%,100%,.3); font-size: 20px; font-family: 'Lora',serif; line-height: 1.5; border-radius: 10px; width: 60%; box-shadow: 5px 3px 30px black; overflow: hidden; } main::before { content: ''; margin: -35px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; filter: blur(20px); z-index: -1; } <main> <blockquote>"The more often we see the things around us - even the beautiful and wonderful things - the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers,the trees,the birds,the clouds - even those we love. Because we see things so often,we see them less and less." <footer>— <cite> Joseph B. Wirthlin </cite> </footer> </blockquote> </main> 在Codepen:https://codepen.io/jonitrythall/pen/GJQBOp上可以看到实例 快速注意: 根据您已经设置的网站结构,您的Z-Index可能与示例中描述的不同。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |