Wie kann ich ein Bild innerhalb einer CSS-Bildlaufleistenschaltfläche drehen, ohne die Schaltfläche selbst zu drehen?

Hintergrundbilder in CSS-Bildlaufleisten drehen: Ein Rotationsrätsel gelöst

Frage:

In Beim Versuch, ein Bild innerhalb einer Chrome-Bildlaufleistenschaltfläche zu drehen, stieß ein Entwickler auf eine Herausforderung. Während die Eigenschaft -webkit-transform die gesamte Schaltfläche einschließlich ihres Inhalts erfolgreich dreht, suchten sie nach einer Lösung, um nur das Bild zu drehen.

Antwort:

Die Lösung liegt bei der Nutzung des Pseudoelements :before, das ein zusätzliches Element innerhalb des ursprünglichen Elements erstellt. Indem Sie das Pseudoelement absolut positionieren, seine Abmessungen definieren und es relativ zum übergeordneten Element positionieren, wird es zu einer separaten „Ebene“.

CSS-Code-Snippet:

#myelement:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(background.png) 0 0 repeat;
    transform: rotate(30deg);
}

Hier Snippet wird das Hintergrundbild innerhalb des Pseudoelements festgelegt und mithilfe der Transformationseigenschaft gedreht. Der Z-Index stellt sicher, dass die Bildebene hinter dem Inhalt des Hauptelements bleibt. Durch Anpassen der Eigenschaften „oben“ und „links“ kann das Bild innerhalb des Elements so positioniert werden, dass es um seine bevorzugte Mitte rotiert.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Bild innerhalb einer CSS-Bildlaufleistenschaltfläche drehen, ohne die Schaltfläche selbst zu drehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!