Versetzen eines Hintergrundbildes von rechts mit CSS

Question

Gibt es eine Möglichkeit, ein Hintergrundbild eine bestimmte Anzahl von Pixeln von der rechten Seite seines Elements zu positionieren?

Um zum Beispiel etwas eine bestimmte Anzahl von Pixeln (sagen wir 10) von der links würde ich es so machen:

#myElement {
    background-position: 10px 0;
}

Answer 1

Ich fand diese CSS3-Funktion hilfreich:

/* to position the element 10px from the right */
background-position: right 10px top;

Soweit ich weiß, wird dies im IE8 nicht unterstützt. Im neuesten Chrome/Firefox funktioniert es gut.

Ver Kann ich die für Einzelheiten zu den unterstützten Browsern.

Verwendete Quelle: http://tanalin.com/en/blog/2011/09/css3-background-position/

Update :

Diese Funktion wird nun von allen wichtigen Browsern, auch von mobilen Browsern, unterstützt.

Answer 2

!! Überholte Antwort, da CSS3 brachte diese Funktion

Gibt es eine Möglichkeit, ein Hintergrundbild eine bestimmte Anzahl von Pixeln von der rechten Seite seines Elements zu positionieren?

Nö.

Beliebte Umgehungslösungen sind

• Einstellung einer margin-right auf dem Element stattdessen
• Hinzufügen von transparenten Pixeln zum Bild selbst und Positionierung des Bildes top right
• oder die Berechnung der Position mit jQuery, nachdem die Breite des Elements bekannt ist.

Answer 3

Die einfachste Lösung ist die Verwendung von Prozentsätzen. Dies ist nicht genau die Antwort, die Sie gesucht haben, da Sie für Pixel-Präzision gefragt, aber wenn Sie nur etwas brauchen, um ein wenig Polsterung zwischen dem rechten Rand und das Bild haben, geben etwas eine Position von 99% funktioniert in der Regel gut genug.

Código:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

Answer 4

Überholte Antwort: Es ist jetzt in den wichtigsten Browsern implementiert, siehe die anderen Antworten auf diese Frage.

CSS3 hat die Spezifikation von background-position so dass es mit verschiedenen Ausgangspunkten funktionieren wird. Leider kann ich keinen Hinweis darauf finden, dass dies bereits in den wichtigsten Browsern implementiert ist.

http://www.w3.org/TR/css3-background/#the-background-position Siehe Beispiel 12.

background-position: right 3em bottom 10px;

Answer 5

Wie vorgeschlagen aquí Dies ist eine ziemlich browserübergreifende Lösung, die perfekt funktioniert:

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

Ich habe es verwendet, da die CSS3-Funktion zur Angabe von Offsets, die in der als Lösung der Frage markierten Antwort vorgeschlagen wurde, in Browsern noch nicht so gut unterstützt wird. Z.B..