CSS/HTML游戏卡片背景图片显示异常问题求助

问题描述 #

开发游戏网站时遇到游戏卡片背景显示异常：鼠标悬停时卡片显示正常，但移出后背景图片尺寸异常，同区域其他卡片为空。需求是：鼠标未悬停时，卡片背景尺寸与悬停时一致，无滤镜、不显示文字。

当前代码 #

CSS代码 #

.featured-game {
  background-color: rgb(25, 25, 25);
  border-radius: 15px;
  box-shadow: 0 0 25px rgba(47, 120, 255, 0.25);
  transition: all 0.3s ease;
  cursor: pointer;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(47, 120, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 75px;
  text-decoration: none;
  font-family: 'Bebas Neue', serif;
  color: rgba(255, 255, 255, 0);
  overflow: hidden;
}

.featured-game:hover {
  box-shadow: 0 0 25px rgba(47, 120, 255, 0.75);
  transform: scale(1.05);
  color: rgb(255, 255, 255);
}

.featured-game:hover .game-icon-background {
  filter: brightness(0.5) blur(5px);
}

.game-icon-background {
  background-size: cover;
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

HTML代码 #

<a href="#" class="featured-game">
  SLOPE
  <div class="game-icon-background" style="background-image: url(https://play-lh.googleusercontent.com/oBVmErbDvtDzvVvmXETTvxeeYgqt3WmpKMGMEbLtWiJlOEPIbQA0N3hNit8yhTBhBA=w2560-h1440-rw);"></div>
</a>

当前效果 #

• 鼠标悬停：左侧显示名为“SLOPE”的高亮卡片，同区域其他五个卡片为空
• 鼠标移出：显示“SLOPE”游戏背景图，中间存在灰色卡片内容

解决方法 #

问题核心是.featured-game未设置position: relative，导致绝对定位的.game-icon-background脱离父容器约束，引发尺寸和布局异常。以下是修改后的代码：

修改后的CSS代码 #

.featured-game {
  background-color: rgb(25, 25, 25);
  border-radius: 15px;
  box-shadow: 0 0 25px rgba(47, 120, 255, 0.25);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid rgb(47, 120, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 75px;
  text-decoration: none;
  font-family: 'Bebas Neue', serif;
  color: transparent;
  overflow: hidden;
  position: relative; /* 关键：让绝对定位子元素以卡片为基准 */
  width: 200px; /* 设置固定宽高，确保所有卡片尺寸统一 */
  height: 300px;
}

.featured-game:hover {
  box-shadow: 0 0 25px rgba(47, 120, 255, 0.75);
  transform: scale(1.05);
  color: rgb(255, 255, 255);
}

.featured-game:hover .game-icon-background {
  filter: brightness(0.5) blur(5px);
}

.game-icon-background {
  background-size: cover;
  background-position: center; /* 确保背景图居中显示 */
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  filter: none; /* 默认无滤镜 */
}

修改说明 #

1. 给.featured-game添加position: relative，让绝对定位的背景容器始终以卡片为定位基准，避免尺寸溢出或错位。
2. 将文字颜色改为transparent，比rgba(255,255,255,0)更规范，确保未悬停时文字完全隐藏。
3. 给.game-icon-background添加background-position: center，保证背景图片在卡片内居中显示，避免裁剪不当。
4. 设置.featured-game固定宽高，确保所有卡片尺寸统一，解决“同区域其他卡片为空”的布局问题。
5. 明确.game-icon-background默认无滤镜，仅在悬停时应用模糊和调暗效果，符合需求。

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