Wie kann ich in CSS3 einen Ein-/Ausblendübergang für Hintergrundbilder erstellen?

Bild-Einblendeffekt-Übergang in CSS3

Die Implementierung eines Ein-/Ausblendeffekts mithilfe von CSS-Übergängen ist für Elemente möglich, aber was ist mit Hintergrundbildern?

Ein Leser hatte kürzlich Schwierigkeiten, dies mit dem Hintergrund mithilfe des folgenden CSS zu erreichen:

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

Das Problem war Diese Hintergrundeigenschaft kann nicht für Elemente wie Text animiert werden.

Die Lösung besteht darin, die Hintergrund-Bildeigenschaft separat umzustellen, wie in diesem aktualisierten CSS zu sehen ist:

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

Dies ermöglicht Bildübergänge verblassen. Bitte beachten Sie, dass Chrome, Opera und Safari diesen Übergang derzeit nativ unterstützen. Firefox und Internet Explorer möglicherweise nicht.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS3 einen Ein-/Ausblendübergang für Hintergrundbilder erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!