css3 背景毛玻璃-纯CSS磨砂玻璃疗效

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在我年轻时做过的开发中css3 背景毛玻璃，毛玻璃应用最广泛的是复杂的背景图像。

如果想要在复杂的背景上添加文字，既能清晰地显示文字，又尽可能保留原来的背景，那么使用毛玻璃的效果来处理是非常合适的。

本文主要讲解背景毛玻璃的疗效，同时也讲一下如何模糊文字的疗效。

如果你懒得写代码css3 背景毛玻璃，也可以使用《这18个网站可以让你的页面背景眼花缭乱》中提到的GlassMorphism网站直接生成毛玻璃效果。

背景图磨砂玻璃

在Photoshop中，毛玻璃主要使用高斯模糊和羽化。 说白了就是模糊。

在CSS中，要实现模糊效果，可以使用滤镜。 背景一般设置为白色、灰色或蓝色，然后设置背景的不透明度就可以实现简单的毛玻璃效果。

为了实现模糊，我使用background-filter:blur();。

.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);
}


  
毛玻璃

里面的代码中，background-filter:blur(20px); 是关键点。 有了它，就实现了毛玻璃的基本疗效。

最后添加 box-shadow:0030px10pxrgba(0,0,0,.3); 在磨砂玻璃和背景之间制作一点阴影，看起来会更自然。

文字磨砂玻璃

虽然文字版中磨砂玻璃的疗效也是模糊的疗效。

这种情况下，当键盘移入文字时，文字就变得清晰； 当键盘移出时，它会变得模糊。 也可以用纯 CSS 来完成。

重点是text-shadow的使用

  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;
  }

毛玻璃

代码库

⭐纯CSS磨砂玻璃的疗效

如果你对后端可视化感兴趣，我还提供了很多demo供你复制粘贴。

⭐Warehouse：后端数据可视化

如果你对历史悠久的Canvas库Fabric.js感兴趣，也可以看看我编译的Demo。

⭐ 仓库：Fabric.js 学习资料

欢迎来到星