84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
找了半天网上没找到能够动态影响下方页面，使之模糊的解决。这是b站的一个模糊效果，静态的，原理是使用两张一样的图片，一张取部分模糊和另一张拼合。
我的想法是类似于AE的调节层加个高斯模糊，对下方图层有实时影响（页面滑动）css的滤镜好像不能作用于下方图层，只能作用于某元素本身。
初学前端，请大佬们指点！
光阴似箭催人老，日月如移越少年。
其实大部分情况b站的那种假模糊就足够使用了你要的效果也能实现，挺麻烦的，兼容性还差，初入前端还是不要去折腾这种没啥太大意义的东西了，当然代码也是有的，我这里给个css3实现毛玻璃效果的demo，你自己可以看着能否触类旁通
body, main::before { background: url("tiger.jpg") 0 / cover fiexed; } main { positon: relative; background: hsla(0, 0%, 100%, .3); overflow: hidden; } main::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; filter: blur(20px); margin: -30px; }
使用CSS3 - filter滤镜属性，模糊效果的值为blur(模糊值px)，而导航固定就用position属性，固定定位值为fixed。
其实大部分情况b站的那种假模糊就足够使用了
你要的效果也能实现，挺麻烦的，兼容性还差，初入前端还是不要去折腾这种没啥太大意义的东西了，当然代码也是有的，我这里给个css3实现毛玻璃效果的demo，你自己可以看着能否触类旁通
使用CSS3 - filter滤镜属性，模糊效果的值为blur(模糊值px)，而导航固定就用position属性，固定定位值为fixed。