如何实现类似于玻璃雾面效果的图层叠加效果下方的视觉效果。

Question

我想要实现与这个示例图片相同的效果，即在主图像后面有两层相同色调的颜色层：

以下是我迄今为止尝试过的方法：

我的尝试是将主要图像复制了3次，并将它们叠放在一起。然而，我仍然不知道如何为第二和第三个图像层添加样式，以达到与示例图片相同的效果。我尝试过模糊和磨砂玻璃效果，但看起来很难看。

<div v-for="song in top4Songs" :key="song.id" class="song-container">
        <div id="parent">
          <div>               
              <div class="song-image-container">
                  <img :src="song.coverUrl">
              </div>
            
            <div class="song-info">
                <div class="song-image-container2">
                <img :src="song.coverUrl">
                <h2>{{song.title}}</h2>
            </div>           
              
            </div>
            <div class="song-image-container3">
              <img :src="song.coverUrl">
              
            </div>
          </div>
        </div>

CSS

/* second layer */
.song-image-container 
{
  position:absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
}

/* first layer */
.song-image-container2 {
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  /*  */ 
}
/*third layer*/
.song-image-container3 
{
  position: absolute; 
  top: 22px;
  left: 22px;
  z-index: 0;  
}

非常感谢您对实现这种特定效果的任何建议。

- Simplylmk

Answer 1

创建一个覆盖在每个图像顶部的叠加层。例如：

<div class="song-image-container">
     <img width="300" :src="song.coverURL">
     <div class="song-image-overlay"></div>
 </div>

给覆盖层设置低不透明度的灰色和背景模糊效果。例如：

.song-image-overlay
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
}

调整原始图像后面的两个图像之间的颜色、不透明度和模糊程度，以符合您的喜好。

如果这个解决方案不符合您的需求，请查看此链接：通过Javascript获取图像的平均颜色。

- Damion Voshall

---

非常感谢您的建议。然而，低透明度的灰色并不完全适合这个图像，所以我认为您提供的通过JS获取平均颜色的功能对于这种效果是必要的。 - Simplylmk

我认为有一个更好的解决方案，只需基于CSS，而不需要多个图像和重复元素。您可以使用一个带有::before和::after伪元素的单个元素来创建这种效果。 - davidleininger

Answer 2

您可以通过一个`div`和图像来实现这一点。您只需要给`div`添加一个合适的::before和::after并对它们进行样式设置。这里关于`::before`和`::after`的不透明度样式可能不正确，但从这里开始您应该能够完成。

.song-image-container {
  border-radius: 20px;
  height: 360px;
  position: relative;
  width: 360px;
}

.song-image-container img {
  border-radius: 20px;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.song-image-container::before, 
.song-image-container::after {
  background-image: url(https://images.unsplash.com/photo-1495615080073-6b89c9839ce0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3F1YXJlfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60);
  background-size: cover;
  border-radius: 20px;
  content: '';
  height: 100%;
  left: 12px;
  opacity: 0.5;
  position: absolute;
  top: 12px;
  z-index: -1;
  width: 100%;
}
.song-image-container::after {
  border-radius: 20px;
  content: '';
  left: 24px;
  top: 24px;
  z-index: -2;
}

body {
    display: grid;
    height: 100vh;
    margin: 0;
    place-items: center;
}

<div class="song-image-container">
  <img src="https://images.unsplash.com/photo-1495615080073-6b89c9839ce0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3F1YXJlfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60" alt="cover art for...">
</div>

如果你需要通过标记提供背景图像，你可以简单地添加 style="background-image: url(...imageurl...);"。这将给你相同的效果，并且你不需要为每个元素调整CSS。

- davidleininger

---

你是正确的，这个解决方案可以用更少的计算资源实现所需的效果。谢谢你的建议。 - Simplylmk