继续创作，减速成长！这是我参加「掘金日新打算 · 6 月更文挑战」的第23天，点击查看流动详情
本文简介
点赞 + 关注 + 珍藏 = 学会了
在我年老时做过的开发中，毛玻璃利用得最广是在简单的背景图上。
如果你心愿在一个简单的背景上增加文字，文字能清晰展现，并尽可能的保留原背景的话，应用毛玻璃的成果去解决是十分适合的。
本文次要解说背景毛玻璃成果，也会讲讲文字如何做出含糊成果。
如果你懒得写代码，也能够应用 《这18个网站能让你的页面背景炫酷起来》 外面提到的 Glass Morphism 网站间接生成毛玻璃成果。
背景图毛玻璃
在 PhotoShop 中，毛玻璃次要应用 高斯含糊 和 羽化 。说白了就是含糊。
在 CSS 中，想要实现含糊成果，能够应用 滤镜 。背景通常设置成彩色、灰色或者红色，而后再设置一下背景的不透明度就能实现一个简略的毛玻璃成果。
要实现含糊，我应用的是 backdrop-filter: blur(); 。
<style>.box { width: 700px; height: 700px; display: flex; justify-content: center; align-items: center; background: url('http://k21vin.gitee.io/front-end-data-visualization/assets/bg01.13dfb262.jpg'); background-size: 100%; background-position: center;}.frosted__glass { width: 80%; height: 40%; border-radius: 40px; display: flex; justify-content: center; align-items: center; font-size: 60px; letter-spacing: 0.5em; backdrop-filter: blur(20px); color: #fff; box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);}</style><div class="box"> <div class="frosted__glass">毛玻璃</div></div>下面的代码中，backdrop-filter: blur(20px); 是重点。有了它就实现了毛玻璃的根本成果。
最初加上 box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3); 让毛玻璃与背景之间产生一点暗影，看起来会更天然。
文字毛玻璃
文字版的毛玻璃成果其实也是一个含糊成果。
这个案例是鼠标移入文字时，文字变清晰；鼠标移出后变含糊。也是 纯CSS 能够做进去的。
重点是 text-shadow 的应用
<style> div { color: rgba(0, 0, 0, 0); text-shadow: 0 0 10px #000; cursor: default; transition: color 0.3s ease, text-shadow 0.3s ease; } div:hover { color: rgba(0, 0, 0, 1); text-shadow: none; }</style><div>毛玻璃</div>代码仓库
⭐纯CSS 毛玻璃成果
如果你对前端可视化方面感兴趣，我也提供了很多 demo 给你复制粘贴。
⭐仓库：前端数据可视化
如果你对 Fabric.js 这个 Canvas 的老字号库感兴趣的话，也能够看看我整理出来的 Demo。
⭐仓库：Fabric.js 学习材料
欢送 Star
举荐浏览
《这18个网站能让你的页面背景炫酷起来》
《console.log也能插图！！！》
《Fabric.js 从入门到收缩》
《纯css实现117个Loading成果》
《视差特效的原理和实现办法》
点赞 + 关注 + 珍藏 = 学会了
点赞 + 关注 + 珍藏 = 学会了