Comment puis-je créer une transition fondu entrant/fondu sortant pour les images d'arrière-plan en CSS3 ?

Transition d'effet de fondu d'image en CSS3

L'implémentation d'un effet de fondu entrant et sortant à l'aide de transitions CSS est possible pour les éléments, mais qu'en est-il des images d'arrière-plan ?

Un lecteur a récemment eu du mal à y parvenir avec l'arrière-plan en utilisant le CSS suivant :

.title a {
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

Le problème était cette propriété background ne peut pas être animée pour des éléments comme le texte.

La solution réside dans la transition de la propriété background-image séparément, comme le montre ce CSS mis à jour :

.title a {
    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}

Cela permet transitions de décoloration de l’image. Veuillez noter qu'actuellement, Chrome, Opera et Safari prennent en charge nativement cette transition. Firefox et Internet Explorer ne le peuvent pas.

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!