如何实现主图下层堆叠的类磨砂玻璃视觉效果？

你用堆叠图片的思路没问题，但现有代码的层级布局、样式处理不到位，导致效果达不到预期。下面是具体的优化方案，不用复制三次img标签，用伪元素就能搞定：

一、简化HTML结构 #

减少冗余DOM节点，用一个容器包裹主图和标题：

<div v-for="song in top4Songs" :key="song.id" class="song-container">
  <div class="song-card" :style="{'--cover-url': `url(${song.coverUrl})`}">
    <div class="main-content">
      <img :src="song.coverUrl" class="main-cover">
      <h2>{{ song.title }}</h2>
    </div>
  </div>
</div>

二、核心CSS实现 #

利用伪元素::before和::after创建两层背景，通过滤镜、位移和层级控制实现堆叠效果：

/* 卡片容器，控制整体尺寸和间距 */
.song-container {
  width: 220px;
  margin: 40px;
  display: inline-block;
}

/* 核心卡片容器，必须设为relative让伪元素相对它定位 */
.song-card {
  position: relative;
  padding: 16px;
}

/* 主内容区（主图+标题），层级最高 */
.main-content {
  position: relative;
  z-index: 3;
  text-align: center;
}

.main-cover {
  width: 100%;
  height: auto;
  border-radius: 8px; /* 可选，和背景层统一圆角 */
}

/* 第一层背景（主图后方紧邻层） */
.song-card::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  width: 100%;
  height: 100%;
  background: var(--cover-url);
  background-size: cover;
  background-position: center;
  filter: blur(4px) brightness(0.8); /* 模糊+调暗，模拟同色调 */
  z-index: 2;
  border-radius: 8px;
}

/* 第二层背景（最底层） */
.song-card::after {
  content: '';
  position: absolute;
  top: 24px;
  left: 24px;
  width: 100%;
  height: 100%;
  background: var(--cover-url);
  background-size: cover;
  background-position: center;
  filter: blur(8px) brightness(0.6); /* 更模糊+更暗，拉开层次感 */
  z-index: 1;
  border-radius: 8px;
}

三、关键细节调整 #

• 滤镜参数：blur()的像素值、brightness()的比例可以根据示例图微调，要是想要纯灰度的同色调，把滤镜改成filter: grayscale(1) brightness(0.7)就行。
• 偏移量：top和left的数值控制背景层的错开距离，数值越大，堆叠的层次感越强。
• 层级控制：主内容区z-index设为3，第一层背景2，第二层1，确保主图始终在最上方。
• Vue动态绑定：通过CSS变量--cover-url把歌曲封面地址传给伪元素，解决伪元素无法直接用Vue绑定背景图的问题。

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