如何仅为多张背景图中的顶层aaa.png添加box-shadow？

你遇到的问题根源在于：box-shadow 是作用于元素本身的样式，无法直接针对多背景图中的某一层单独设置。要实现仅给顶层的 aaa.png 添加阴影，需要把这张图从背景图列表中抽离，用伪元素单独承载，再对伪元素设置阴影。

具体实现代码如下：

body {
  /* 仅保留底层背景图 */
  background-image: url(http://placeholder/bbb.png);
  /* 为伪元素提供定位基准 */
  position: relative;
  /* 可选：让body铺满视口，避免伪元素超出可视范围 */
  min-height: 100vh;
  margin: 0;
}

/* 用伪元素承载顶层的aaa.png */
body::before {
  content: '';
  background-image: url(http://placeholder/aaa.png);
  /* 背景图适配规则，可根据需求调整 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* 让伪元素悬浮在body上方 */
  position: absolute;
  top: 50%;
  left: 50%;
  /* 实现精准居中 */
  transform: translate(-50%, -50%);
  /* 伪元素尺寸需匹配aaa.png实际大小，或用background-size自适应 */
  width: 200px; /* 示例宽度，按需修改 */
  height: 200px; /* 示例高度，按需修改 */
  /* 仅给伪元素添加阴影，等价于给aaa.png加阴影 */
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5); /* 补充阴影颜色，示例为半透明黑 */
  /* 确保伪元素在最上层 */
  z-index: 1;
}

关键说明： #

• 将 aaa.png 转移到 ::before 伪元素后，阴影只会作用于这个独立容器，不会影响底层的 bbb.png。
• 通过 position: absolute + transform: translate(-50%, -50%) 保证伪元素与原背景图叠加的居中效果一致。
• 伪元素的宽高可根据图片实际尺寸调整，若想让图片自适应容器，可配合 background-size: cover 或 contain 灵活修改。

内容的提问来源于stack exchange，提问作者Nick