Transition sur fond de taille ne fonctionne pas
Je suis en train de mettre une transition sur mon image de fond d'écran sur le vol stationnaire.
C'est mon Code pour l'instant:
HTML
<div class="item-one"></div>
CSS
.item-one {
height: 345px;
width: 256px;
background: url('http://placehold.it/256x345') scroll no-repeat center center;
background-size: cover;
-webkit-transition: background-size 1500ms linear;
-moz-transition: background-size 1500 linear;
-o-transition: background-size 1500 linear
-ms-transition: background-size 1500ms linear;
transition: background-size 1500ms linear;
}
.item-one:hover {
background-size: 150%;
}
Mais cela ne fonctionne pas pour moi, testé sur différents navigateurs. D'autres transitions comme couleur d'arrière-plan fonctionne comme prévu. Est-il une restriction pour les transitions sur cette propriété?
aussi comme @fsn mentionné, il manque un point-virgule sur la ligne 8
OriginalL'auteur Sonic750 | 2015-07-30
Vous devez vous connecter pour publier un commentaire.
Je pense que le problème est avec
background-size: cover
, lorsque vous la changez pouril travaillera
JSFiddle
Il y a une autre question à propos de
background-size: cover
alternative, qui peuvent aider à Est-il une alternative à l'background-size:cover?Ou une autre solution pour les problèmes de ce type:
CSS3 fondu enchaîné bg image lorsque le couvercle est utilisé
Si vous voulez qu'il fonctionne avec Chrome, vous devez donner les deux paramètres. Comme ça
background-size:100% 100%;
OriginalL'auteur areim
Vous avez une faute de frappe:
version de travail ci-dessous:
fonctionne très bien, il n'a pas wokred avant cuz de 'background-size:cover' :
OriginalL'auteur fsn