Heim > Web-Frontend > CSS-Tutorial > Wie kann ich ein Hintergrundbild in CSS in einem bestimmten Abstand von rechts positionieren?

Wie kann ich ein Hintergrundbild in CSS in einem bestimmten Abstand von rechts positionieren?

Patricia Arquette
Freigeben: 2024-11-19 05:26:03
Original
492 Leute haben es durchsucht

How Can I Position a Background Image a Specific Distance from the Right in CSS?

Hintergrundbilder mit CSS von rechts positionieren

Frage:

Können Sie ein Hintergrundbild in einem bestimmten Abstand ausrichten? am rechten Rand des übergeordneten Elements mithilfe von CSS?

Beispiel:

Um ein Bild zu platzieren 10 Pixel von links würden Sie das folgende CSS verwenden:

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

Antwort:

Mit der CSS3-Eigenschaft „Hintergrundposition“ können Sie Hintergrundbilder von der verschieben rechter Rand eines Elements:

/* Offset the element 10px from the right */
background-position: right 10px top;
Nach dem Login kopieren

Beachten Sie, dass:

  • Diese Funktion wird nicht unterstützt in IE8.
  • Es wird in modernen Browsern, einschließlich Chrome, Firefox und Edge, weitgehend unterstützt.

Sie können die Browserkompatibilität unter Can I Use überprüfen: https://caniuse. com/background-position-shorthand

Update:

Ab sofort wird diese Funktion in unterstützt alle gängigen Browser, einschließlich mobiler Browser.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Hintergrundbild in CSS in einem bestimmten Abstand von rechts positionieren?. 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