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!
background-image
n'est pas une propriété animable ( w3.org/TR/css3-transitions/#animatable-properties ), donc votre solution n'est pas conforme au standard.