Transition CSS : la taille de l'arrière-plan ne fonctionne pas

Question

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.

Voici à quoi ressemble mon code HTML :

 

  

 
 
MALEV Cessna c172 HA-SJX (G1000)
 Télécharger

≪/pré>
还有我的 CSS：
: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é>
过渡不起作用。
            

Answer 1

Il s'avère que la transition ne fonctionne pas pour les propriétés automatiques et certaines autres propriétés (remplacer, inclure, hériter, initial, non défini). La solution que j'ai trouvée consistait à utiliser JavaScript en utilisant le code suivant :

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

Tout d'abord, je calcule le rapport pour déterminer dans quelle mesure il faut redimensionner l'image lorsqu'elle n'est pas survolée. Je dois transmettre cette valeur qui est utilisée dans l'événement div 中创建一个新属性 bgSize 并将其存储在那里，来存储要在 onmouseleave.

J'utilise ensuite l'événement onmouseenter 和 onmouseleave pour modifier la taille de l'image au survol.

J'ai également supprimé le sélecteur :hover dans le fichier CSS car il est désormais obsolète.