Wie drehe ich ein Hintergrundbild in CSS, ohne seinen Inhalt zu drehen?

Ein Hintergrundbild innerhalb eines Containers drehen, ohne den Inhalt zu beeinflussen

Wenn es um die Gestaltung von Website-Komponenten geht, ist die Bildlaufleiste ein gemeinsames Element. Für ein optisch ansprechenderes Design möchten Sie möglicherweise die Elemente der Bildlaufleiste anpassen. Das Drehen des Hintergrundbilds auf einer Bildlaufleiste verhält sich jedoch möglicherweise nicht immer wie erwartet.

In Chrome kann das Drehen des Hintergrundbilds auch dazu führen, dass der darin enthaltene Inhalt gedreht wird. Wenn Sie das Bild drehen möchten, ohne seinen Inhalt zu drehen, finden Sie hier eine mögliche Lösung:

Eine effektive Lösung für dieses Problem finden Sie unter http://www.sitepoint.com/css3-transform-background-image/ :

#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);
}

Dieser Code erstellt ein Pseudoelement mithilfe des :before-Selektors. Es positioniert absolut einen transparenten Kasten mit Abmessungen, die doppelt so groß sind wie sein übergeordnetes Element, und zentriert ihn innerhalb des übergeordneten Elements. Das Hintergrundbild wird dann auf dieses Pseudoelement angewendet und stellt so sicher, dass es sich unabhängig vom eigentlichen Inhalt dreht.

Das obige ist der detaillierte Inhalt vonWie drehe ich ein Hintergrundbild in CSS, ohne seinen Inhalt zu drehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!