Open ccforward opened 8 years ago
https://ccforward.github.io/css-secrets/frosted-glass/index.html
background-attachment: fixed
主要代码:
main { position: relative } main::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; /* 伪元素置于最下面 */ background: rgba(255, 0, 0, .5); /* 添加背景色做测试 */ }
效果:
然后就把红色背景替换掉 开始进行模糊处理 添加代码:
body, main::before { background: url(//gw.alicdn.com/tps/i1/TB1Zc6qHpXXXXb3XFXXeowVVXXX-1200-800.jpg) 0 / cover fixed; } main { background: hsla(0, 0%, 100%, .2) border-box; } main::before { -webkit-filter: blur(15px); filter: blur(15px); }
现在的效果其实已经很接近毛玻璃了,但是有个问题,就是边缘处的模糊效果会逐渐的削弱并突出出去(显得有点脏玻璃的感觉),换成红色背景来看就很明显:
所以解决方案就是:
main::before { margin: -30px; }
main { overflow: hidden; }
最终效果就出来了
这方案应该能封装一个 React 组件出来
毛玻璃效果 - 《css揭秘》笔记
Demo地址
https://ccforward.github.io/css-secrets/frosted-glass/index.html
方案
background-attachment: fixed
处理起来容易些,非固定背景的情况比较麻烦主要代码:
效果:![](http://pic.yupoo.com/ccking/FDKpXeeY/ELBjS.png)
然后就把红色背景替换掉 开始进行模糊处理
添加代码:
现在的效果其实已经很接近毛玻璃了,但是有个问题,就是边缘处的模糊效果会逐渐的削弱并突出出去(显得有点脏玻璃的感觉),换成红色背景来看就很明显:
所以解决方案就是:
最终效果就出来了
参考