backdrop和background的区别是什么

在 CSS 开发中，background 和 backdrop 虽然常被统称为“背景”，但它们作用的对象和层级完全不同。background 负责绘制当前元素自身的底色或图片，而 backdrop 相关属性则关注元素背后的内容或顶层界面的遮罩。理清这两者的区别，能避免在制作毛玻璃效果或自定义对话框时出现样式失效的问题。

background与backdrop作用对象对比

1. 使用 background 设置元素自身背景

background 是最基础的背景属性，它直接作用于当前选中的 HTML 元素。无论是设置纯色、渐变还是背景图，渲染结果都位于该元素的背景层，不会受到页面其他内容的影响。

在样式表中选中目标类名，添加 background 属性。例如给卡片设置白色背景：

.card {
  background: #ffffff;
}

如果需要背景图，可以进一步指定位置和尺寸：

.banner {
  background-image: url("banner.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

此时观察页面，颜色或图片仅填充在当前元素的边界内。即使元素是半透明的，background 也不会去读取或处理它后面的页面内容，它只负责“画”自己。

1. 使用 background 设置元素自身背景

2. 使用 backdrop-filter 实现后方内容模糊

当需要实现类似 iOS 的毛玻璃效果时，单纯使用 background 无法做到。这时需要用到 backdrop-filter，它过滤的是当前元素后方、透过该元素可见的内容。

backdrop-filter实现毛玻璃效果

创建一个半透明面板，先设置半透明背景色让后方内容透出来，再应用模糊滤镜：

.glass-panel {
  /* 必须具有透明度，否则后方内容不可见 */
  background: rgba(255, 255, 255, 0.22);
  /* 对元素后方的内容进行模糊处理 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

注意，如果 background 设置为完全不透明（如 #fff），后方内容会被完全遮挡，backdrop-filter 也就失去了作用对象。因此，这两个属性通常配合使用：background 控制透光程度，backdrop-filter 控制模糊强度。

3. 使用 ::backdrop 设置顶层遮罩

::backdrop 是一个伪元素，专门用于

dialog {
  background: #fff; /* 对话框自身的白色背景 */
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.45); /* 对话框后面的半透明黑色遮罩 */
}

.panel {
  /* 退化样式：纯色背景 */
  background: #e9eef5;
}

@supports (backdrop-filter: blur(8px)) {
  .panel {
    /* 支持时的增强样式 */
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(8px);
  }
}