鼠标悬停时背景仅显示3/4？CSS背景显示异常问题求助

为什么背景只显示3/4区域？ #

你用<span>作为容器，它属于行内元素（inline），行内元素的上下padding不会真正撑开容器的高度，容器高度由默认行高（line-height）决定。而图片是替换元素，实际高度超过了行高，所以hover时背景只能显示到行高对应的区域，也就是你看到的3/4部分。

修复方案 #

把容器改成行内块元素（inline-block），让padding能正常撑开容器高度，同时给容器加上圆角，和图片的圆角保持一致：

修改后的CSS代码：

img {
  width: 100px;
}

.gameContainer {
  padding: 20px;
  margin: 0px 20px;
  display: inline-block; /* 核心修改：让容器能被padding撑开高度 */
  border-radius: 10px; /* 让背景和图片保持相同圆角 */
}

.gameContainer:hover {
  background-color: hsl(0, 0%, 70%);
}

.game {
  border-radius: 10px;
}

HTML代码无需修改：

<span class="gameContainer"><img src = "https://upload.wikimedia.org/wikipedia/en/4/4b/The_Elder_Scrolls_IV_Oblivion_cover.png" class = "game"></span>

效果说明 #

改成inline-block后，容器会根据图片高度+上下padding计算自身高度，hover时背景会完整覆盖整个容器区域，同时容器的圆角和图片的圆角配合，实现你想要的“带圆角的伪边框”效果。后续要在下方加文字，直接在<span>内部图片下方添加即可，行内块元素能很好地容纳这些内容。

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