使用 HTML 和 CSS 设计磨砂玻璃效果

简介

磨砂玻璃效果是一种常见的 UI 设计效果，它可以用来给页面元素增加深度和立体感，也可以用来简化页面的视觉复杂度。在 HTML 和 CSS 中，我们可以使用多种方式来实现这种效果。

实现方法

方法一：使用 CSS 的 backdrop-filter 属性

backdrop-filter 是一个比较新的 CSS 属性，它可以用来为元素的背景添加一个滤镜，从而产生磨砂玻璃的效果。不过需要注意的是，backdrop-filter 并不是所有浏览器都支持，所以在使用时需要注意兼容性问题。

.container {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

方法二：使用 CSS 的伪元素 ::before 和 ::after

另一种实现磨砂玻璃效果的方法是使用 CSS 的伪元素 ::before 和 ::after，通过给它们的背景添加半透明的纹理图案，然后使用 CSS 的 opacity 属性来控制元素的透明度，从而模拟出磨砂玻璃的效果。

.container::before,
.container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.container::before {
  background: url("texture.png") repeat;
  opacity: 0.5;
}

.container::after {
  background: url("noise.png") repeat;
  opacity: 0.3;
}

总结

磨砂玻璃效果是一种简单而实用的 UI 设计效果，在实现时可以使用 CSS 的种种技巧来达到不同的效果，可根据需求选择最合适的方式来实现。