设置导航毛玻璃的效果

最新推荐文章于 2023-04-07 21:30:45 发布

sepier

最新推荐文章于 2023-04-07 21:30:45 发布

阅读量331

点赞数 1

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/sepier/article/details/119672741

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何设置导航栏的毛玻璃效果，并展示了在不同浏览器（谷歌、火狐、Safari）下的表现。谷歌和Safari成功实现了模糊效果，而火狐则不支持，呈现默认背景。文章提及backdrop-filter属性的使用，但指出其适应性问题，提示读者根据需求选择使用。

摘要由CSDN通过智能技术生成

设置导航毛玻璃效果

.nav {
    background: #fff;  
}
@supports (backdrop-filter:none) or (-webkit-backdrop-filter:none) {
    .nav {
        -webkit-backdrop-filter: blur(25px);    
        backdrop-filter: blur(25px); 
        background: hsla(0, 0%, 100%, .45);  
    }
}