Heim > Web-Frontend > CSS-Tutorial > Wie kann ich ein Hintergrundbild in einem Container drehen, ohne dessen Inhalt zu beeinflussen?

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

Patricia Arquette
Freigeben: 2024-12-04 10:38:12
Original
1015 Leute haben es durchsucht

How Can I Rotate a Background Image in a Container Without Affecting Its Content?

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

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

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!

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