CSS 过渡：背景大小不起作用

Question

<p>我正在开发一个网站，当您将鼠标悬停在图像上时，它会缩小，以便您可以看到整个图像，而无需缩小太多以查看 div 的背景。</p> <p>这就是我的 HTML 的样子：</p> <pre class="brush:html;toolbar:false;"><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> </前> <p>还有我的CSS：</p>

:root {
  --img-size: 350px;
  --按钮边距：20px；

  --深蓝色：#070b21；
  --蓝色：#10184a；
  --浅蓝色：#00d1ff；
}

div#wrapper {
  位置：相对；
  保证金：自动；
  底部边距：100px；
  背景颜色：var(--深蓝色);
  宽度：var(--img-size);
}

div#imgDiv {
  位置：相对；
  文本对齐：居中；
  红色;
  填充：0；
  保证金：0；
  背景颜色：var(--深蓝色);
  溢出：隐藏；
  高度：var(--img-size);
}

div#imgDiv div#transitionDiv {
  背景位置 x：50%；
  高度：100%；
  宽度：100%；
  背景大小：auto var(--img-size);
  背景重复：不重复；

  -webkit-transition：背景大小 1500ms 轻松；
  -moz-transition：背景大小 1500 缓动；
  -o-transition：背景大小 1500 缓动；
  -ms-transition：背景大小 1500ms 缓和；
  过渡：背景大小 1500ms 缓和；
}

div#imgDiv:悬停 div#transitionDiv {
  背景位置 y：50%；
  背景大小：var(--img-size) auto;
}

p#标题{
  溢出：隐藏；
  高度：38像素；
  边距：30 像素；
  显示：-webkit-box；
  -webkit线夹：2；
  -webkit-box-orient：垂直；
}

div#designs div a {
  显示：块；
  文本对齐：居中；
  文本装饰：无；
  背景颜色：var(--浅蓝色);
  白颜色;
  字体大小：40px；
  字体系列：“蒙特塞拉特”，无衬线；
  边距：var(--按钮边距)；
  内边距：0px；
  宽度： calc(100% - 2 * var(--button-margin));
  边框半径：15px；
  过渡：0.5s；
}

div#designs div a#no-link {
  背景颜色：灰色；
}

div#designs div a:悬停 {
  背景颜色：dodgerblue； /* 现在使用随机颜色 */
}

div#designs div a:active {
  背景颜色：蓝色； /* 现在使用随机颜色 */
}
</前>
<p>我正在尝试寻找解决方案，他们都说遵循我的方式。这将背景图像缩放到正确的大小，但过渡无效。</p>
<p>我还尝试更改div，设置在div内有一个图像标签，但也失效了。</p>

Answer 1

事实证明，过渡不适用于自动和其他一些属性（覆盖、包含、继承、初始、未设置）。我找到的解决方案是使用 JavaScript 使用以下代码：

img.onload = function () {
    let height = img.naturalHeight;
    let width = img.naturalWidth;
    let ratio = height / width;
    img.surroundingDiv.bgSize = "" + ((1 / ratio) * 100) + "%";
    img.surroundingDiv.style.backgroundSize = this.surroundingDiv.bgSize;
};

transitionDiv.style.backgroundImage = "url(" + img.src + ")";
transitionDiv.onmouseenter = function () {
    this.style.backgroundSize = 100 + "%";
};
    
transitionDiv.onmouseleave = function () {
    this.style.backgroundSize = this.bgSize;
};

首先，我计算比率，以计算出当图像未悬停在其上方时要缩放图像多少。我必须通过在 div 中创建一个新属性 bgSize 并将其存储在那里，来存储要在 onmouseleave 事件中使用的该值。< /p>

然后，我使用 onmouseenter 和 onmouseleave 事件来更改悬停在图像上时的图像大小。

我还删除了 css 文件中的 :hover 选择器，因为它现在已过时。