如何放大PNG图片背景且不缩放图片？下拉菜单箭头场景实现

我来帮你搞定这个问题！你想要实现hover时箭头后方的白色圆形背景更大，但箭头本身不缩放，对吧？目前直接给<img>元素加背景的方式会受图片尺寸限制，咱们换个思路——用容器包裹箭头，让容器承载背景效果，箭头保持原尺寸居中即可。

修改后的HTML代码 #

<div class="right-menu">
  <span class="helper"></span>
  <img src="https://image.flaticon.com/icons/svg/1738/1738760.svg" alt="account" width="40">
  <span class="helper"></span>
  <!-- 用容器包裹箭头图片，让容器承载背景效果 -->
  <span class="arrow-container">
    <img id="down-arrow" src="https://image.flaticon.com/icons/svg/271/271210.svg" alt="down-arrow" width="15">
  </span>
</div>

修改后的CSS代码 #

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.right-menu {
  float: right;
  position: relative;
  height: 100%;
  right: 2%;
  /* 给菜单加个默认高度方便预览效果，可根据实际场景调整 */
  height: 50px;
  background-color: #eee;
}

/* 定义箭头容器的基础样式 */
.arrow-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; /* 这里的宽高直接控制背景圆的大小，可按需调整 */
  height: 30px;
  border-radius: 50%;
  transition: ease 0.2s;
  vertical-align: middle;
}

/* hover时给容器添加白色背景 */
.right-menu:hover > .arrow-container {
  background-color: white;
}

.right-menu img {
  padding: 2px;
  vertical-align: middle;
  max-height: 80%;
  transition: ease 0.2s;
}

/* 固定箭头图片尺寸，避免被容器缩放 */
#down-arrow {
  width: 15px;
  height: auto;
}

关键改动说明 #

• 新增.arrow-container容器：用这个独立容器包裹箭头图片，容器的宽高直接决定背景圆的大小，你可以通过调整width和height自由控制背景圆的尺寸
• Flex布局居中：容器设置为inline-flex布局，配合align-items和justify-content让箭头始终在背景圆中心，保证视觉位置不变
• 转移hover效果到容器：把原来给箭头图片加背景的逻辑，改成给容器加背景，彻底摆脱图片尺寸对背景大小的限制
• 固定箭头尺寸：明确设置#down-arrow的宽高，确保hover时箭头不会被容器意外缩放

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