<p>Je développe un site Web sur lequel lorsque vous survolez une image, il effectue un zoom arrière afin que vous puissiez voir l'image entière sans avoir à trop zoomer pour voir l'arrière-plan du div. </p> <p>Voici à quoi ressemble mon code HTML : </p> <pre class="brush:html;toolbar:false;"><div id="wrapper"> <div id="imgDiv"> <div id="transitionDiv" style="image d'arrière-plan : url("../resources/models/HA-SJX.JPG");"></div> </div> <p id="titre">MALEV Cessna c172 HA-SJX (G1000)</p> <a href="../downloads/TP172-MALEV PS_P4exw.zip" download="MALEV Cessna c172 HA-SJX (G1000)">Télécharger</a> </div> ≪/pré> <p>还有我的 CSS：</p> <pre class="brush:css;toolbar:false;">:root { --img-taille : 350 px ; --bouton-marge : 20 px ; --bleu foncé : #070b21 ; --bleu : #10184a ; --bleu clair : #00d1ff ; } div#wrapper { position : relative ; marge : auto ; marge inférieure : 100 px ; couleur d'arrière-plan : var(--bleu foncé); largeur : var(--img-size); } div#imgDiv { position : relative ; alignement du texte : centre ; La couleur rouge; remplissage : 0 ; marge : 0 ; couleur d'arrière-plan : var(--bleu foncé); débordement caché; hauteur : var(--img-size); } div#imgDiv div#transitionDiv { position-arrière-plan-x : 50 % ; hauteur : 100 % ; largeur : 100 % ; taille d'arrière-plan : auto var(--img-size); répétition d'arrière-plan : pas de répétition ; -webkit-transition : facilité de taille d'arrière-plan de 1 500 ms ; -moz-transition : facilité de taille d'arrière-plan 1 500 ; -o-transition : facilité de taille d'arrière-plan 1 500 ; -ms-transition : facilité de taille d'arrière-plan de 1 500 ms ; transition : facilité de taille d'arrière-plan de 1 500 ms ; } div#imgDiv:survoler div#transitionDiv { position d'arrière-plan-y : 50 % ; taille d'arrière-plan : var(--img-size) auto ; } p#titre { débordement caché; hauteur : 38px ; marge : 30px ; affichage : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ; } div#conceptions div a { bloc de visualisation; alignement du texte : centre ; décoration de texte : aucune ; couleur d'arrière-plan : var(--bleu clair); Couleur blanche; taille de police : 40 px ; famille de polices : "Montserrat", sans empattement ; marge : var(--bouton-marge); remplissage : 0px ; largeur : calc(100% - 2 * var(--button-margin)); rayon de bordure : 15 px ; transition : 0,5 s ; } div#designs div a#no-link { couleur de fond : gris ; } div#designs div a:hover { couleur d'arrière-plan : bleu dodger ; /* en utilisant une couleur aléatoire pour l'instant */ } div#conceptions div a:active { couleur de fond : bleu ; /* en utilisant une couleur aléatoire pour l'instant */ } ≪/pré> <p>过渡不起作用。</p> <p>

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