Heim > Web-Frontend > CSS-Tutorial > Wie positioniere ich ein Hintergrundbild mit CSS von rechts?

Wie positioniere ich ein Hintergrundbild mit CSS von rechts?

Barbara Streisand
Freigeben: 2024-11-28 05:41:12
Original
962 Leute haben es durchsucht

How Do I Position a Background Image from the Right Using CSS?

Ein Hintergrundbild von rechts mit CSS positionieren

Im Bereich Webdesign ist es oft notwendig, Hintergrundbilder präzise innerhalb von Elementen zu positionieren. Während es einfach ist, Bilder von links zu verschieben, wie können Sie dasselbe von rechts erreichen?

Die Lösung liegt in der Nutzung der Eigenschaft „Hintergrundposition“ mit Schlüsselwortwerten.

#myElement {
    background-position: right 10px top;
}
Nach dem Login kopieren

Dies Der Code positioniert das Hintergrundbild 10 Pixel vom rechten Rand des Elements sowie am oberen Rand des Elements.

Anfangs wurde diese Technik nicht allgemein unterstützt, wird aber inzwischen unterstützt wurde mit modernen Browsern kompatibel. Browser wie Chrome und Firefox geben die Hintergrundpositionierung präzise wieder. Eine umfassende Übersicht über die Browserunterstützung finden Sie unter Can I Use (https://caniuse.com/).

Ursprünglich im Tanalin-Blog entdeckt (http://tanalin.com/en/blog/2011 /09/css3-background-position/) ist diese CSS3-Funktion für die präzise Positionierung von Hintergrundbildern unverzichtbar geworden.

Das obige ist der detaillierte Inhalt vonWie positioniere ich ein Hintergrundbild mit CSS von rechts?. 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