Wie kann ich mit CSS3 einen reibungslosen Hintergrundbildübergang erzielen?

CSS3-Hintergrundbildübergang

Beim Implementieren eines „Ein-/Ausblendeffekts“ mithilfe von CSS-Übergängen funktioniert dieser möglicherweise nicht mit dem Hintergrund Bilder. Um dies zu überwinden, muss die Eigenschaft „Hintergrundbild“ gezielt angesprochen werden.

Im bereitgestellten CSS lautet der Code, der versucht, das Hintergrundbild zu überführen:

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

Um das Hintergrundbild zu überführen , verwenden Sie den folgenden Code für das Element mit dem Hintergrundbild (normalerweise ein -Tag):

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

Diese Syntax wird nativ von Chrome unterstützt. Opera und Safari. Firefox und Internet Explorer unterstützen diese Funktion derzeit nicht.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS3 einen reibungslosen Hintergrundbildübergang erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!