一个JavaScript / CSS解决方案,响应式效果,可配置,跨浏览器的毛玻璃效果的任何内容。
<div class="frosted-panel" panel-dimensions="80% 60%" breakpoint-type="min-width" breakpoints="600px 80% 80%, 1200px 60% 500px"> <svg> <filter id="blurMe" filterRes="1200" color-interpolation-filters="sRGB"> <feGaussianBlur in="SourceGraphic" stdDeviation="7" /> </filter> <image xlink:href="bg.jpg" x="0" y="0" width="2880" height="1620" filter="url(#blurMe)" /> </svg> <div class="content" content-margin="5px"> ALL PANEL CONTENT GOES HERE </div> </div>
js局部模糊效果
正在加载文件目录...
- 热度 36
![](http://imgs.bootstrapmb.com/2023/1/280216439.jpg)
kclbd下载了 此素材
![](http://imgs.bootstrapmb.com/2022/3/300353340.jpg)
.下载了 此素材
![](http://imgs.bootstrapmb.com/2021/10/140249247.jpg)
阿飞下载了 此素材
![](http://imgs.bootstrapmb.com/2022/1/260334171.jpg)
青白°下载了 此素材
![](http://imgs.bootstrapmb.com/2023/7/190411001.jpg)
Remember...下载了 此素材
![](http://imgs.bootstrapmb.com/2021/9/160153249.jpg)
戴磊下载了 此素材
![](http://imgs.bootstrapmb.com/2023/2/230237488.jpg)
Conquer365下载了 此素材
![](http://imgs.bootstrapmb.com/2022/10/230548082.jpg)
I AM WHAT I AM下载了 此素材
![](http://imgs.bootstrapmb.com/2023/4/181141046.jpg)
蜜炼柚下载了 此素材
![](http://imgs.bootstrapmb.com/2023/1/310248241.jpg)
嗷嗷下载了 此素材