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

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

Mary-Kate Olsen
Freigeben: 2024-12-05 13:35:11
Original
285 Leute haben es durchsucht

How Can I Rotate an Image Within a CSS Scrollbar Button Without Rotating the Button Itself?

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);
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage