css实现磨砂效果（filter 与 backdrop-filter 的对比分析）

在 CSS 中实现磨砂效果（类似于 iOS 的磨砂玻璃效果）通常结合使用 backdrop-filter 属性和半透明的背景色。

div class="content">
  img src="srcassets404_imagesxxmLogo.png" alt="">
  div class="frosted-glass">
    p>This is a frosted glass effect.p>
  div>
div>

.content {
  position: relative;
  width: 200px;
  height: 200px;
}

.frosted-glass {
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.3);
  
  backdrop-filter: blur(20px);
  
  -webkit-backdrop-filter: blur(10px);
  
  text-align: center;
  left: 0;
  bottom: 0;
  position: absolute;
}

• background-color: rgba(255, 255, 255, 0.3);：使用半透明的白色背景，让背景内容依然可见，同时为磨砂效果打基础。
• backdrop-filter: blur(10px); 和 -webkit-backdrop-filter: blur(10px);：这是磨砂效果的核心。backdrop-filter 对元素后面的背景应用模糊效果。-webkit-backdrop-filter 是为了兼容 Safari 浏览器。

效果图：

添加 backdrop-filter：

未加 backdrop-filter：

拓展

给 img 加上 filter：blur(5px); 会产生如下效果：

• filter: 是一个 CSS 属性，用于为元素的图像本身（或任何其他可以应用滤镜的元素）应用视觉效果，比如模糊、锐化、颜色变化等。它直接影响到应用了该属性的元素本身。
• backdrop-filter: 同样是一个 CSS 属性，但它的作用是为元素背后的区域（即元素的背板）应用滤镜效果。这意味着它可以为任何位于该元素下面的元素添加视觉效果，而不会改变元素本身的样式。

CSS 属性 filter 与 backdrop-filter 的对比分析