如何调整图片hover状态下背景色的尺寸与位置？

你遇到的核心问题是直接给<img>元素设置背景色的局限性：<img>属于替换元素，它的背景区域会被自身图像内容覆盖（如果图像不透明，背景甚至完全看不到），而且background-size属性仅对背景图片生效，对纯色背景毫无作用，这就是你调整它没效果的原因。

想要实现你图中那种「图片后方有可控制尺寸和位置的圆形hover背景」，最靠谱的思路是给图片套一个容器，把hover效果转移到容器上。下面给你两种实用方案：

方案1：伪元素实现背景（精准控制位置/尺寸） #

这种方式能自由调整背景的大小、偏移量，完全不影响图片布局：

修改后的HTML #

<div class="col col-md-6">
  <a href="#" onclick="gotofive()" class="image-wrapper">
    <img style="width: 50%;" src="https://preview.ibb.co/e00h5d/yes_student.png">
  </a>
</div>

对应的CSS #

.image-wrapper {
  display: inline-block; /* 让容器贴合图片宽度 */
  position: relative;
}

/* 用伪元素创建hover背景 */
.image-wrapper:hover::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让背景居中 */
  width: 120%; /* 背景尺寸：设为图片的120%，可按需修改 */
  height: 120%;
  background-color: #f7b0ee;
  border-radius: 50%;
  z-index: -1; /* 把背景放在图片后方 */
  transition: all 0.5s ease;
}

方案2：容器padding实现背景（简单易上手） #

如果只需要背景围绕图片，不需要特别精准的位置调整，这种方法更简洁：

修改后的HTML #

<div class="col col-md-6">
  <a href="#" onclick="gotofive()" class="hover-container">
    <img style="width: 50%;" src="https://preview.ibb.co/e00h5d/yes_student.png">
  </a>
</div>

对应的CSS #

.hover-container {
  display: inline-block;
  padding: 15px; /* padding大小决定背景的「厚度」，按需调整 */
  border-radius: 50%;
  transition: background-color 0.5s ease;
}

.hover-container:hover {
  background-color: #f7b0ee;
}

你可以根据自己的布局需求选择方案，方案1的伪元素方式灵活性更高，适合需要精细调整背景位置的场景。

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