Wie kann ich ein Hintergrundbild in einem Container drehen, ohne dessen Inhalt zu beeinflussen?

Hintergrundbild in einem Container drehen

Bei dieser Frage möchte der Benutzer das Hintergrundbild am unteren Rand einer Chrome-Bildlaufleiste drehen, aber nur das Bild , nicht der Inhalt.

Das bereitgestellte CSS:

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ECEEEF;
    border-color: #999;
}

Um die gewünschte Rotation zu erreichen, ohne den Inhalt zu beeinträchtigen, erfolgt eine zweistufige Vorgehensweise wird empfohlen. Erstellen Sie zunächst mithilfe der CSS-Transformation ein Pseudoelement mit der gewünschten Drehung:

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

Dadurch wird ein transparentes Pseudoelement erstellt, das sich über den gesamten Container erstreckt und um den gewünschten Winkel gedreht wird. Der Inhalt des Containers wird dann über diesem gedrehten Pseudoelement platziert.

Wie in der referenzierten Ressource vorgeschlagen, ermöglicht diese Technik die Drehung von Hintergrundbildern, ohne deren Inhalt zu verzerren.

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