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

Die CSS3-Spezifikation, die verschiedene Ursprünge für die Hintergrundposition zulässt, wird jetzt in Firefox 14 unterstützt, aber immer noch nicht in Chrome 21 (anscheinend unterstützt IE9 sie teilweise, aber ich habe es nicht selbst getestet)

Zusätzlich zu der von @MattyF erwähnten Chrome-Ausgabe gibt es hier eine prägnantere Zusammenfassung: http://code.google.com/p/chromium/issues/detail?id=95085

Answer 2

Wenn Sie proportionierte Elemente haben, können Sie diese verwenden:

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

In diesem Beispiel, .valid wäre die Klasse mit dem Bild und .half wäre eine Zeile, die nur halb so groß ist wie die Standardzeile.

Es ist schmutzig, aber es funktioniert wunderbar und ist einigermaßen handhabbar.

Answer 3

Wenn Sie dies für das Hinzufügen von Pfeilen/anderen Symbolen zu einer Schaltfläche zum Beispiel verwenden möchten, könnten Sie css Pseudo-Elemente verwenden?

Wenn es sich wirklich um ein Hintergrundbild für die gesamte Schaltfläche handelt, neige ich dazu, die Abstände in das Bild einzubauen, und verwende einfach

background-position: right 0;

Aber wenn ich zum Beispiel einen Pfeil zu einer Schaltfläche hinzufügen muss, neige ich dazu, dieses HTML zu verwenden:

<a href="[url]" class="read-more">Read more</a>

Und neigen dazu, Folgendes mit CSS zu tun:

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url('../images/btn-white-arrow-right.png');
    position: absolute;
    right: 12px;
    top: 10px;
}

Mit dem Selektor :after füge ich mit CSS ein Element hinzu, das nur dieses kleine Symbol enthält. Sie könnten dasselbe tun, indem Sie einfach eine span oder <i> Element innerhalb des a-Elements. Aber ich denke, dies ist ein sauberer Weg, um Symbole zu Schaltflächen hinzuzufügen, und es wird von allen Browsern unterstützt.

können Sie sich die Geige hier ansehen: http://codepen.io/anon/pen/PNzYzZ

Answer 4

Die Position "Mitte rechts" verwenden und dann einen transparenten Rahmen hinzufügen, um sie zu versetzen?

Answer 5

Wenn Sie ein Element mit fester Breite haben und die Breite Ihres Hintergrundbildes kennen, können Sie die Hintergrundposition einfach wie folgt festlegen: Breite des Elements - Breite des Bildes - die gewünschte Lücke auf der rechten Seite.

Zum Beispiel: mit einem 100px breiten Element und einem 300px breiten Bild, um eine Lücke von 10px auf der rechten Seite zu erhalten, setzen Sie es auf 100-300-10=-210px :

#myElement {
  background:url(my_image.jpg) no-repeat -210px top;
  width:100px;
}

Und Sie erhalten die äußersten rechten 80 Pixel Ihres Bildes auf der linken Seite Ihres Elements und eine Lücke von 20px auf der rechten Seite.

Ich weiß, das klingt vielleicht blöd, aber manchmal spart es Zeit... Ich verwende das oft in vertikaler Form (Lücke unten) für Navigationslinks mit Text unter dem Bild.

Ich bin mir jedoch nicht sicher, ob dies auf Ihren Fall zutrifft.