CSS中background-size的transition过渡效果失效问题求助

开发网站时需要实现鼠标悬停图片时，图片缩放至完整显示且不露出div背景，目前已实现尺寸变化，但过渡动画不生效。

问题原因及修复步骤 #

1. 修复过渡属性的语法错误 #

你的CSS中-moz-transition和-o-transition的时间值缺少ms单位，浏览器无法识别，导致过渡失效。同时统一过渡属性的写法，减少冗余前缀（现代浏览器已支持标准transition）。

2. 改用transform缩放实现过渡（更优方案） #

background-size的过渡在部分浏览器兼容性较差，改用transform: scale()配合background-position: center，既能保证图片居中完整显示，又能获得更流畅的过渡效果，同时避免露出div背景。

修改后的完整代码 #

HTML代码 #

<div id="wrapper">
 <div id="imgDiv">
  <div id="transitionDiv" style="background-image: url('../resources/models/HA-SJX.JPG');"></div>
 </div>
 <p id="title">MALEV Cessna c172 HA-SJX (G1000)</p>
 <a href="../downloads/TP172-MALEV PS_P4exw.zip" download="MALEV Cessna c172 HA-SJX (G1000)">Download</a>
</div>

注：修复了style属性中URL的引号嵌套问题，将双引号改为单引号避免语法错误

CSS代码 #

:root {
  --img-size: 350px;
  --button-margin: 20px;

  --dark-blue: #070b21;
  --blue: #10184a;
  --light-blue: #00d1ff;
}

div#wrapper {
  position: relative;
  margin: auto;
  margin-bottom: 100px;
  background-color: var(--dark-blue);
  width: var(--img-size);
}

div#imgDiv {
  position: relative;
  text-align: center;
  color: red;
  padding: 0;
  margin: 0;
  background-color: var(--dark-blue);
  overflow: hidden;
  height: var(--img-size);
}

div#imgDiv div#transitionDiv {
  background-position: center; /* 统一居中 */
  height: 100%;
  width: 100%;
  background-size: cover; /* 初始覆盖容器，保证无空白 */
  background-repeat: no-repeat;
  transition: transform 1500ms ease; /* 改用transform过渡 */
  transform-origin: center; /* 以中心为缩放原点 */
}

div#imgDiv:hover div#transitionDiv {
  transform: scale(1.1); /* 按需调整缩放比例，保证图片完整显示且不露出背景 */
}

p#title {
  overflow: hidden;
  height: 38px;
  margin: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

div#designs div a {
  display: block;
  text-align: center;
  text-decoration: none;
  background-color: var(--light-blue);
  color: white;
  font-size: 40px;
  font-family: "Montserrat", sans-serif;
  margin: var(--button-margin);
  padding: 0px;
  width: calc(100% - 2 * var(--button-margin));
  border-radius: 15px;
  transition: 0.5s;
}

div#designs div a#no-link {
  background-color: grey;
}

div#designs div a:hover {
  background-color: dodgerblue; /* using random color for now */
}

div#designs div a:active {
  background-color: blue; /* using random color for now */
}

说明 #

• 使用transform: scale()替代background-size变化，过渡效果更稳定，兼容性更好。
• background-size: cover保证初始状态图片填满容器，无空白；悬停时缩放图片，配合overflow: hidden隐藏超出部分，不会露出div背景。
• 可根据实际图片比例调整scale()的数值，确保图片完整显示。

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