欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

最简单的前端css仿ios毛玻璃效果

程序员文章站 2022-06-16 09:14:06
效果图:https://soft.clbug.com/效果1:背景图背景虚化。先在背景图设置好图片背景,再在body下的div加上一层背景虚化即可。body{ background: url("https://soft.clbug.com/wp-content/uploads/2021/03/adqib-5qb3v-120x120.png"); background-size: cover; background-repeat: no-repeat; backg.....

最简单的前端css仿ios毛玻璃效果

效果图:https://soft.clbug.com/

效果1:背景图背景虚化。先在背景图设置好图片背景,再在body下的div加上一层背景虚化即可。

body{
    background: url("https://soft.clbug.com/wp-content/uploads/2021/03/adqib-5qb3v-120x120.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.body-div{

    background: hsla(0,0%,100%,.3);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

效果2:具有背景虚化的导航菜单,只需要在菜单div上面加上背景虚化的代码及设置下背景颜色即可。

.menu{
    background-color: hsla(0,0%,89.8%,.8);
    background: hsla(0,0%,100%,.3);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

最简单的前端css仿ios毛玻璃效果

 

本文地址:https://blog.csdn.net/wang7396/article/details/114313164