CSS-Übergang: Hintergrundgröße funktioniert nicht

Question

Ich entwickle eine Website, auf der das Bild verkleinert wird, wenn Sie mit der Maus über ein Bild fahren, sodass Sie das gesamte Bild sehen können, ohne zu stark verkleinern zu müssen, um den Hintergrund des Divs zu sehen.

So sieht mein HTML aus:

<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>

还有我的 CSS:

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

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

div#wrapper {
  Position: relativ;
  Rand: automatisch;
  Rand unten: 100px;
  Hintergrundfarbe: var(--dark-blue);
  Breite: var(--img-size);
}

div#imgDiv {
  Position: relativ;
  Textausrichtung: Mitte;
  Farbe Rot;
  Polsterung: 0;
  Rand: 0;
  Hintergrundfarbe: var(--dark-blue);
  Überlauf versteckt;
  Höhe: var(--img-size);
}

div#imgDiv div#transitionDiv {
  Hintergrundposition-x: 50 %;
  Höhe: 100 %;
  Breite: 100 %;
  Hintergrundgröße: auto var(--img-size);
  Hintergrundwiederholung: keine Wiederholung;

  -webkit-transition: Hintergrundgröße 1500 ms Leichtigkeit;
  -moz-transition: Hintergrundgröße 1500 Leichtigkeit;
  -o-transition: Hintergrundgröße 1500;
  -ms-transition: Hintergrundgröße 1500 ms Leichtigkeit;
  Übergang: Hintergrundgröße 1500 ms Leichtigkeit;
}

div#imgDiv:hover div#transitionDiv {
  Hintergrundposition-y: 50 %;
  Hintergrundgröße: var(--img-size) auto;
}

p#title {
  Überlauf versteckt;
  Höhe: 38px;
  Rand: 30px;
  Anzeige: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertikal;
}

div#designs div a {
  Bildschirmsperre;
  Textausrichtung: Mitte;
  Textdekoration: keine;
  Hintergrundfarbe: var(--light-blue);
  Farbe weiß;
  Schriftgröße: 40px;
  Schriftfamilie: „Montserrat“, serifenlos;
  Rand: var(--button-margin);
  Polsterung: 0px;
  width: calc(100% - 2 * var(--button-margin));
  Randradius: 15px;
  Übergang: 0,5 s;
}

div#designs div a#no-link {
  Hintergrundfarbe: grau;
}

div#designs div a:hover {
  Hintergrundfarbe: Dodgerblue; /* verwende vorerst eine zufällige Farbe */
}

div#designs div a:active {
  Hintergrundfarbe: blau; /* verwende vorerst eine zufällige Farbe */
}

过渡不起作用.

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 选择器，因为它现在已过时。