Css 如何为图像堆叠效果下方的图层实现与磨砂玻璃类似的视觉效果

I want to achieve this same effect as this sample picture where there is 2 layers of the same color tone behind the main image:

以下是我到目前为止try 过的:

我的try 是:我将主图像复制了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;  
}

任何实现这一具体效果的建议都将受到真正的赞赏.