Ein CSS-Hintergrundbild x Pixel von rechts positionieren?

Question

Ich denke, die Antwort ist nein, aber kann man ein Hintergrundbild mit CSS so positionieren, dass es eine feste Anzahl von Pixeln von der rechten Seite entfernt ist?

Wenn ich die background-position Werte von x und y, scheint es, dass diese nur feste Pixelanpassungen von links bzw. oben ergeben.

Answer 1

background-position: right 30px center;

Sie funktioniert in den meisten Browsern. Siehe: http://caniuse.com/#feat=css-background-offsets für die vollständige Liste.

Weitere Informationen: http://www.w3.org/TR/css3-background/#the-background-position

Answer 2

Es ist möglich, das Attribut border als Länge von rechts

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

Answer 3

Es gibt eine Möglichkeit, die aber nicht von jedem Browser unterstützt wird (siehe Berichterstattung hier )

element {
  background-position : calc(100% - 10px) 0;
}

Es funktioniert in jedem modern Browser, aber es ist möglich, dass der IE9 abstürzt . Auch keine Abdeckung für =< IE8.

Answer 4

Soweit ich weiß, ist die CSS-Spezifikation bietet nicht genau das, wonach Sie fragen, natürlich abgesehen von CSS-Ausdrücken. Ausgehend von der Annahme, dass Sie nicht wollen, Ausdrücke oder Javascript zu verwenden, sehe ich drei hackish Lösungen:

• Stellen Sie sicher, dass Ihr Hintergrundbild der Größe des Containers entspricht (zumindest in der Breite) und setzen Sie background-repeat: repeat o repeat-x wenn nur die Breite angeglichen wird. Dann, wenn etwas erscheint x Pixel von rechts ist so einfach wie background-position: -5px 0px .
• Verwendung von Prozentsätzen für background-position weist ein besonderes Verhalten auf, das besser zu sehen ist als hier beschrieben. Probieren Sie es aus. Im Wesentlichen, background-position: 90% 50% bewirkt, dass der rechte Rand des Hintergrundbildes 10 % vom rechten Rand des Containers entfernt liegt.
• Erstellen Sie ein Div, das das Bild enthält. Legen Sie explizit die Position des Elements fest, das das Bild enthält position: relative wenn nicht bereits eingestellt. Setzen Sie den Bildcontainer auf position: absolute; right: 10px; top: 10px; wobei Sie die letzten beiden natürlich nach eigenem Ermessen anpassen können. Platzieren Sie den Bild-Div-Container in das enthaltende Element.

Answer 5

Versuchen Sie dies:

#myelement {
  background-position: 100% 50%;
  margin-right: 5px;
}

Beachten Sie jedoch, dass der obige Code das gesamte Element (nicht nur das Hintergrundbild) um 5px von rechts verschiebt. Dies könnte für Ihren Fall in Ordnung sein.