Wie übertrage ich Hintergrundbilder mit CSS3 richtig?

CSS3-Hintergrundbildübergänge beherrschen

Bei dem Versuch, einen auffälligen „Ein-/Ausblendeffekt“ zu erzeugen, sind Sie beim Versuch auf eine unerwartete Herausforderung gestoßen um die CSS-Übergangseigenschaft auf ein Hintergrundbild anzuwenden. Sehen wir uns unten eine umfassende Lösung an:

Das in Ihrem Code bereitgestellte CSS:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

Der obige Code zeigt einen lobenswerten Versuch, berücksichtigt jedoch keine subtile, aber entscheidende Unterscheidung zwischen die Eigenschaft „background“ und die Eigenschaft „background-image“. Um das Hintergrundbild zu animieren, müssen Sie den Übergang auf „Hintergrundbild“ und nicht nur auf „Hintergrund“ anwenden.

Hier ist der aktualisierte Code:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background-image 1s;
    -moz-transition: background-image 1s;
    -o-transition: background-image 1s;
    transition: background-image 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background-image 1s;
    -moz-transition: background-image 1s;
    -o-transition: background-image 1s;
    transition: background-image 1s;
}

Diese Anpassung sollte die Glättung ermöglichen Welchen Übergang Sie für Ihr Hintergrundbild suchen. Denken Sie daran, beim Arbeiten mit Hintergrundbildern in CSS-Übergängen immer „background-image“ als Ziel Ihrer Übergangseigenschaft anzugeben.

Das obige ist der detaillierte Inhalt vonWie übertrage ich Hintergrundbilder mit CSS3 richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!