CSS实现磨砂玻璃（毛玻璃）效果样式

最新推荐文章于 2024-09-21 08:30:17 发布

忧郁的蛋~

最新推荐文章于 2024-09-21 08:30:17 发布

阅读量3.7k

点赞数 2

分类专栏：前端技术文章标签： css 前端 html

本文链接：https://blog.csdn.net/lwf3115841/article/details/130796928

版权

前端技术专栏收录该内容

254 篇文章 14 订阅

订阅专栏

通过CSS3的::before伪元素、backdrop-filter属性和opacity属性，可以创建磨砂玻璃背景效果。首先，为元素添加背景图片，然后使用::before伪元素创建半透明层，再用backdrop-filter进行模糊处理，最后调整opacity以增强效果。注意backdrop-filter的浏览器兼容性问题。

摘要由CSDN通过智能技术生成

要实现磨砂玻璃背景，可以使用 CSS3 中的 ::before 伪元素和 backdrop-filter 属性，结合 opacity 属性和 blur() 函数来实现。

具体实现步骤如下：

创建一个具有背景的元素，例如一个 div 元素。

div {
  background-image: url("your-image-url");
}

使用 ::before 伪元素为元素添加一个半透明的背景层。

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

在这个示例中，设置了 ::before 伪元素的内容为空，位置为绝对定位，宽度和高度分别为 100%，并设置了一个半透明的白色背景色。

使用 backdrop-filter 属性对 ::before 伪元素的背景进行模糊处理。

div::before {
  /* ... */
  backdrop-filter: blur(10px);
}

在这个示例中，使用 blur() 函数设置模糊程度为 10 像素。可以根据需要调整这个值来控制模糊程度。

为了让磨砂玻璃效果更加明显，可以通过 opacity 属性降低 ::before 伪元素的不透明度。

div::before {
  /* ... */
  opacity: 0.8;
}

在这个示例中，将 ::before 伪元素的不透明度降低到 0.8，以增强磨砂玻璃效果。

完整的 CSS 代码如下：

div {
  background-image: url("your-image-url");
  position: relative;
}

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  opacity: 0.8;
}

通过这种方式，可以使用 CSS 快速简单地实现磨砂玻璃背景效果。需要注意的是，backdrop-filter 属性并不是所有浏览器都支持，需要进行兼容性测试和兼容性处理。