Comment puis-je obtenir une transition fluide de l'image d'arrière-plan avec CSS3 ?

Transition d'image d'arrière-plan CSS3

Lors de l'implémentation d'un effet de « fondu entrant et sortant » à l'aide de transitions CSS, il peut ne pas fonctionner avec l'arrière-plan images. Pour surmonter ce problème, la propriété background-image doit être ciblée spécifiquement.

Dans le CSS fourni, le code tentant de faire la transition de l'image d'arrière-plan est :

-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;

Pour faire la transition de l'image d'arrière-plan , utilisez le code suivant sur l'élément avec l'image d'arrière-plan (généralement une balise ) :

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

Cette syntaxe est nativement prise en charge par Chrome, Opera et Safari. Firefox et Internet Explorer ne prennent actuellement pas en charge cette fonctionnalité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!