Wie halte ich die Position des Hintergrundbilds fest, wenn ich einen Container in CSS drehe?

Beibehalten der Bildposition während der Containerrotation

In der Webentwicklung kann das Rotieren von Containerhintergrundbildern ohne Auswirkungen auf deren Inhalt eine herausfordernde Aufgabe sein. Beim Anwenden von Transformationsrotationen auf Container folgt der Bildinhalt häufig diesem Beispiel. Um dieses Problem zu lösen, untersuchen wir eine Lösung, die den Bildinhalt an seiner ursprünglichen Position hält.

Hintergrundbildrotation mit CSS-Transformationen

Betrachten Sie das folgende CSS, das versucht, das Hintergrundbild eines zu drehen Schaltfläche zum Verringern der vertikalen Bildlaufleiste:

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    ...
}

Leider dreht dieser Ansatz sowohl das Bild als auch seinen Inhalt. Um dies zu verhindern, finden Sie in dem unten verlinkten Artikel eine umfassende Lösung:

• [http://www.sitepoint.com/css3-transform-background-image/](http://www .sitepoint.com/css3-transform-background-image/)

Lösung: Pseudoelement mit umgekehrter Rotation

Das Die bereitgestellte Lösung verwendet ein Pseudoelement, um eine virtuelle Bildebene zu erstellen, und wendet eine umgekehrte Drehung darauf an:

#myelement:before {
    content: "";
    ...
    background: url(background.png) 0 0 repeat;
    transform: rotate(-30deg);
}

Diese Methode gleicht im Wesentlichen die Drehung des Containers aus und lässt den Bildinhalt an Ort und Stelle. Beachten Sie, dass Sie möglicherweise den Drehwinkel und andere Werte anpassen müssen, um das gewünschte Ergebnis für Ihr spezifisches Design zu erzielen.

Das obige ist der detaillierte Inhalt vonWie halte ich die Position des Hintergrundbilds fest, wenn ich einen Container in CSS drehe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!