J'essaye de faire un "fondu en fondu en sortie" en utilisant la transition CSS. Mais je ne peux pas faire fonctionner cela avec l'image d'arrière-plan ...

Le CSS:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}​

Jetez un œil: http://jsfiddle.net/AK3La/

Vous pouvez faire la transition background-image. Utilisez le CSS ci-dessous sur l' imgélément:

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

Ceci est pris en charge nativement par Chrome, Opera et Safari. Firefox ne l'a pas encore implémenté ( bugzil.la ). Je ne suis pas sûr d'IE.

La solution (que j'ai trouvée par moi-même) est une astuce ninja, je peux vous proposer deux moyens:

vous devez d'abord créer un "conteneur" pour le <img>, il contiendra les états normal et survolé en même temps:

<div class="images-container">
    <img src="http://lorempixel.com/400/200/animals/9/">
    <img src="http://lorempixel.com/400/200/animals/10/">
</div>

• avec les sélecteurs CSS3 http://jsfiddle.net/eD2zL/1/ (si vous utilisez celui-ci, l'état "normal" sera le premier enfant de votre conteneur, ou changez l' nth-child()ordre)

• Solution CSS2 http://jsfiddle.net/eD2zL/2/ (les différences entre ne sont que quelques sélecteurs)

En gros, vous devez masquer l'état «normal» et afficher leur «survol» lorsque vous le survolez

et c'est tout, j'espère que quelqu'un le trouvera utile.

J'ai trouvé une solution qui a fonctionné pour moi ...

Si vous avez un élément de liste (ou div) contenant uniquement le lien, et disons que c'est pour les liens sociaux sur votre page vers Facebook, Twitter, etc. et vous utilisez une image de sprite, vous pouvez le faire:

<li id="facebook"><a href="facebook.com"></a></li>

Faire de l'arrière-plan "li" l'image de votre bouton

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}

Faites ensuite de l'image d'arrière-plan du lien l'état de survol du bouton. Ajoutez également l'attribut d'opacité à cela et définissez-le sur 0.

#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
}

Maintenant, tout ce dont vous avez besoin est "opacity" sous "a: hover" et réglez ceci sur 1.

#facebook a:hover {
   opacity:1;
}

Ajoutez les attributs de transition d'opacité de chaque navigateur à "a" et "a: hover" pour que le css final ressemble à ceci:

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}
#facebook a:hover {
   opacity:1;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

Si je l'ai expliqué correctement, cela devrait vous permettre d'avoir un bouton d'image d'arrière-plan qui s'estompe, j'espère que cela aide au moins!

Malheureusement, vous ne pouvez pas utiliser la transition background-image, voir la liste w3c des propriétés animables .

Vous voudrez peut-être faire quelques astuces avec background-position.

Vous pouvez utiliser un pseudo élément pour obtenir l'effet souhaité, comme je l'ai fait dans ce Fiddle .

CSS:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    position: relative;
}
.title a:after {
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    content: "";
    opacity: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    /* TRANSISITION */
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{   
    opacity: 1;
}

HTML:

<div class="title">
    <a href="#">HYPERLINK</a>
</div>

Si vous pouvez utiliser jQuery, vous pouvez essayer le plugin BgSwitcher pour changer l'image d'arrière-plan avec des effets, c'est très facile à utiliser.

Par exemple :

$('.bgSwitch').bgswitcher({
        images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
        effect: "fade",
        interval: 10000
});

Et ajoutez votre propre effet, voir l' ajout d'un type d'effet

Essayez ceci, cela rendra l'arrière-plan animé fonctionnera sur le Web mais l'application mobile hybride ne fonctionnera pas

@-webkit-keyframes breath {
 0%   {  background-size: 110% auto; }
 50%  {  background-size: 140% auto; }
 100% {  background-size: 110% auto; }      
}
body {
   -webkit-animation: breath 15s linear infinite;
   background-image: url(images/login.png);
    background-size: cover;
}

Étant donné que les images d'arrière-plan ne peuvent pas être animées, j'ai créé un petit mixin SCSS permettant de faire la transition entre 2 images d'arrière-plan différentes à l'aide de pseudo sélecteurs avant et après . Ils se trouvent à différentes couches d'indice z. Celui qui est en avant commence par l'opacité 0 et devient visible avec le survol.

Vous pouvez également utiliser la même approche pour créer des animations avec des dégradés linéaires.

scss

@mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){  
  position: relative;  
  z-index: 100; 
  &:before, &:after {
    background-size: cover;  
    content: '';    
    display: block;
    height: 100%;
    position: absolute;
    top: 0; left: 0;    
    width: 100%;    
    transition: opacity $transTime;
  }
  &:before {    
    z-index: -101;
    background-image: url("#{$bkg1}");    
  }
  &:after {    
    z-index: -100;
    opacity: 0;
    background-image: url("#{$bkg2}");    
  }
  &:hover {
     &:after{
       opacity: 1; 
     }
  }  
}

Maintenant, vous pouvez simplement l'utiliser avec

@include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");

Vous pouvez le vérifier ici: https://jsfiddle.net/pablosgpacheco/01rmg0qL/

Si l'animation opacityn'est pas une option, vous pouvez également animerbackground-size .

Par exemple, j'ai utilisé ce CSS pour définir un backgound-imageavec un délai.

.before {
  background-size: 0;
}

.after {
  transition: background 0.1s step-end;
  background-image: $path-to-image;
  background-size: 20px 20px;
}

Salam, cette réponse ne fonctionne que dans Chrome, car IE et FF prennent en charge la transition de couleur.

Il n'est pas nécessaire de créer vos éléments HTML opacity:0, car parfois ils contiennent du texte, et pas besoin de doubler vos éléments !.

La question lien vers un exemple dans jsFiddle avait besoin d' un petit changement, qui est de mettre une image vide .title acomme background:url(link to an empty image);même que vous le mettre en .title a:hovermais en faire l' image vide, et le code fonctionnera.

.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
  }
  .title a:hover{   background: transparent;
   background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}

Vérifiez ceci https://jsfiddle.net/Tobasi/vv8q9hum/

Avec le post inspirant de Chris ici:

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

J'ai réussi à trouver ceci:

#banner
{
    display:block;
    width:100%;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-image:url(../images/image1.jpg);
    /* HOVER OFF */
    @include transition(background-image 0.5s ease-in-out); 

    &:hover
    {
        background-image:url(../images/image2.jpg);
        /* HOVER ON */
        @include transition(background-image 0.5s ease-in-out); 
    }
}

Cela peut être réalisé avec une meilleure prise en charge de plusieurs navigateurs que la réponse acceptée en utilisant des pseudo-éléments comme illustré par cette réponse: https://stackoverflow.com/a/19818268/2602816

Je me débattais un peu avec cela, j'ai d'abord utilisé une pile d'images les unes sur les autres et toutes les trois secondes, j'essayais d'animer jusqu'à l'image suivante de la pile et de jeter l'image actuelle au bas de la pile. En même temps, j'utilisais des animations comme indiqué ci-dessus. Je n'ai pas pu le faire fonctionner pour ma vie.

Vous pouvez utiliser cette bibliothèque qui permet ** une image d'arrière-plan redimensionnée dynamiquement, capable de diaporama ** en utilisant jquery-backstretch.

https://github.com/jquery-backstretch/jquery-backstretch