css怎么做出磨砂效果

在现代web设计中，磨砂效果已经成为了非常受欢迎的设计元素，无论是用于图片背景还是文本背景，磨砂效果都可以让网站更加美观。下面我们来探讨一下如何使用CSS实现磨砂效果。

.background {
  /* 设置背景图 */
  background: url("bg.jpg") center center/cover no-repeat;
  /* 添加磨砂效果 */
  background: rgba(255,255,0.7);
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

在上述代码中，我们针对一个背景设置了磨砂效果，首先我们设置了一个背景图片，然后，我们将背景覆盖为白色并设置了不透明度为70%，然后使用CSS filter属性对整个背景进行高斯模糊并设置模糊程度为8px。

另外，我们还可以通过在背景上绘制一个透明的矩形来实现磨砂效果：

.background {
  /* 设置背景图 */
  background: url("bg.jpg") center center/cover no-repeat;
  /* 添加矩形 */
  position: relative;
}
.background:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 设置矩形颜色 */
  background: rgba(255,0.5);
  /* 添加磨砂效果 */
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

在上述代码中，我们使用了CSS伪元素:before来创建一个透明的矩形层，并设置了磨砂效果，然后将它放在背景的前面，这样就实现了磨砂效果。

总之，通过使用CSS filter属性以及伪元素:before，我们可以轻松地实现磨砂效果，为网站设计添加更多的美感。