Loading... ## 实现思路 具体效果展示可见红框框起来的部分 <img src="https://yhevis.top/usr/uploads/2019/10/1632911518.png" alt="mbl_1.png" /> 实现该效果的方法有多种多样,但最泛用的都是利用伪元素的滤镜效果实现: ```css filter: blur(); ``` 利用blur属性可以直接让元素呈高丝模糊状态: wlop大佬的原图: <img src="https://yhevis.top/usr/uploads/2019/10/1334039720.jpg" alt="mbl_2.jpg" /> 添加了blur属性后: <img src="https://yhevis.top/usr/uploads/2019/10/1678396070.jpg" alt="mlb_3.jpg" /> 我们可以看到元素确实是呈高丝模糊状态了,但是边缘羽化过于严重,而且我们会发现blur把连同在内的文字全部模糊了: <img src="https://yhevis.top/usr/uploads/2019/10/1209960997.jpg" alt="mlb_4.jpg" /> 要解决这两个问题我们就需要给伪元素设置这两个样式: ```css z-index:-z; ``` ``````````````````````````` //让文字覆盖伪元素 ``````````````````````````` 和 ```css margin:-30px; ``` `````````````````````````````````````````````````````````````````` //这里的值只要是负的就行,会帮忙解决羽化问题 `````````````````````````````````````````````````````````````````` 接着为了不让羽化范围溢出边界所以我们要给元素本身添上 ```css overflow: hidden; ``` 这个样式。 ## 整体效果 <img src="https://yhevis.top/usr/uploads/2019/10/1054379113.jpg" alt="mbl_5.jpg" /> ## 整体代码 ```css body{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } main{ width: 70%; height: 500px; } body,main::before{ background: url("背景图片路径.jpg") 0 / cover fixed; } main{ position: relative; background: hska(0,0%,100%,.3); overflow: hidden; padding: 20px; } main::before{ position: absolute; top:0; right:0;bottom:0;left:0; filter: blur(20px); margin:-30px; z-index: -1; } ``` ## 参考资料 <span class="external-link"><a href="https://www.cnblogs.com/ghost-xyx/p/5677168.html" target="_blank">CSS技巧收集——毛玻璃效果<i data-feather='external-link'></i></a></span> <span class="external-link"><a href="https://www.zhangxinxu.com/wordpress/2013/11/css-svg-image-blur/" target="_blank">张鑫旭大佬写的<i data-feather='external-link'></i></a></span> Last modification:July 24th, 2020 at 05:17 pm © 允许规范转载 Support 如果觉得我的文章对你有用,请随意赞赏 ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat
从寒冬处暑长到花枝招展
手指粗糙不堪
肌肤黝黑肿胀
眼神萎靡涣散
浑身似不胜力
一朝一夕
也曾海阔凭鱼跃
一身臃肿的肥肉
一颗百沾污浊的内心
一双看不清世界的眼
一颗不知未来朝向何方的骷髅头
也曾怀疑过
也未曾怀疑
可破碎的海绵体
折射不出一毫的五彩斑斓
我也曾回忆
苏轼不教岁月愁
望穿阑干
看不尽灯笼梦与候
我不是陶瓷
我无法言说
吃一碗盐
长六七米路
他日辉煌不依旧
几度夕阳
再回首
往事从头
10/21/2019