如何用CSS实现Spotify同款背景图片淡出效果？

安全阿岳

2026-8-5

实现Spotify风格的产品图背景淡出效果

这种效果可以通过HTML+CSS快速实现，核心思路是用两层元素：一层作为模糊渐变的背景，一层展示清晰的产品图。

实现步骤：

准备一个容器，同时包含背景图和产品图两个子元素
背景图设置为全屏覆盖，添加模糊滤镜和渐变遮罩，模拟淡出效果
产品图居中放置在容器上层

代码示例：

HTML结构

<div class="product-container">
  <div class="product-bg"></div>
  <img class="product-img" src="你的产品图片路径" alt="产品图">
</div>

CSS样式

.product-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.product-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("你的产品图片路径");
  background-size: cover;
  background-position: center;
  /* 添加模糊效果 */
  filter: blur(20px);
  /* 添加渐变遮罩，实现淡出 */
  mask: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0));
  /* 兼容webkit内核浏览器 */
  -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0));
  /* 让背景图比容器大一圈，避免模糊后边缘露出空白 */
  transform: scale(1.1);
}

.product-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px; /* 根据需求调整尺寸 */
  height: auto;
  border-radius: 8px; /* 可选，模拟Spotify的圆角 */
  box-shadow: 0 0 20px rgba(0,0,0,0.3); /* 可选，添加阴影增强层次感 */
}