Versetzen Sie ein Hintergrundbild von rechts mit CSS

Gibt es eine Möglichkeit, ein Hintergrundbild eine bestimmte Anzahl von Pixeln rechts von seinem Element zu positionieren?

Um beispielsweise eine bestimmte Anzahl von Pixeln (z. B. 10) von links zu positionieren, würde ich dies folgendermaßen tun:

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

Ich fand diese CSS3-Funktion hilfreich:

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

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

Weitere Informationen zu den unterstützten Browsern finden Sie unter Kann ich verwenden ?

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

Update :

Diese Funktion wird jetzt in allen gängigen Browsern unterstützt, einschließlich mobiler Browser.

!! Veraltete Antwort, da CSS3 diese Funktion brachte

Gibt es eine Möglichkeit, ein Hintergrundbild eine bestimmte Anzahl von Pixeln rechts von seinem Element zu positionieren?

Nee.

Beliebte Problemumgehungen sind:

• Setzen Sie margin-rightstattdessen ein auf das Element
• Hinzufügen transparenter Pixel zum Bild selbst und Positionieren top right
• oder Berechnen der Position mit jQuery, nachdem die Breite des Elements bekannt ist.

Die einfachste Lösung ist die Verwendung von Prozentsätzen. Dies ist nicht genau die Antwort, nach der Sie gesucht haben, da Sie nach Pixelgenauigkeit gefragt haben. Wenn Sie jedoch nur eine kleine Auffüllung zwischen dem rechten Rand und dem Bild benötigen, funktioniert eine Position von 99% normalerweise gut genug.

Code:

/* 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;
}

Veraltete Antwort: Sie ist jetzt in den wichtigsten Browsern implementiert. Weitere Antworten auf diese Frage finden Sie unter.

CSS3 hat die Spezifikation von background-positionso geändert , dass es mit verschiedenen Ursprungspunkten funktioniert. Leider kann ich noch keine Beweise dafür finden, dass es in allen gängigen Browsern implementiert ist.

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

background-position: right 3em bottom 10px;

Wie hier vorgeschlagen , ist dies 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 zum Festlegen von Offsets, die in der als Lösung der Frage gekennzeichneten Antwort vorgeschlagen wurden, in Browsern noch nicht so gut unterstützt wird. Z.B

Die am besten geeignete Antwort ist die neue vierwertige Syntax für die Hintergrundposition. Bis alle Browser dies unterstützen, ist Ihr bester Ansatz eine Kombination früherer Antworten in der folgenden Reihenfolge:

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

Ein einfacher, aber schmutziger Trick besteht darin, dem Bild, das Sie als Hintergrund verwenden, einfach den gewünschten Versatz hinzuzufügen. Es ist nicht wartbar, aber es erledigt die Arbeit.

Dies funktioniert auf den meisten modernen Browsern ... abgesehen vom IE (Browser-Unterstützung) . Obwohl auf dieser Seite> = IE9 als unterstützt aufgeführt ist, stimmten meine Tests dem nicht zu.

Sie können die Eigenschaft calc () css3 wie folgt verwenden.

.class_name {
    background-position: calc(100% - 10px) 50%;
}

Für mich ist dies der sauberste und logischste Weg, um einen rechten Spielraum zu erreichen. Ich benutze auch einen Fallback der Verwendung border-right: 10px solid transparent;für IE.

Ok, wenn ich verstehe, was Sie fragen, würden Sie dies tun;

Sie haben Ihren DIV-Container aufgerufen #main-containerund .my-elementdas ist darin. Verwenden Sie diese Option, um loszulegen.

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

Übrigens ist es besser, Klassen zu verwenden, wenn Sie auf ein untergeordnetes Element innerhalb einer Seite verweisen (ich gehe davon aus, dass Sie daher meine Namensänderung oben sind.

Die CSS3-Spezifikation, die unterschiedliche 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 sie selbst nicht getestet).

Zusätzlich zu dem Chrome-Problem, auf das @MattyF verwiesen hat, gibt es hier eine prägnantere Zusammenfassung: http://code.google.com/p/chromium/issues/detail?id=95085

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

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

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

In diesem Beispiel .validwäre dies die Klasse mit dem Bild und .halfeine Zeile mit der halben Größe der Standardgröße.

Schmutzig, wirkt aber wie ein Zauber und ist einigermaßen handhabbar.

Wenn Sie dies zum Beispiel zum Hinzufügen von Pfeilen / anderen Symbolen zu einer Schaltfläche verwenden möchten, können Sie CSS-Pseudoelemente verwenden?

Wenn es sich wirklich um ein Hintergrundbild für die gesamte Schaltfläche handelt, neige ich dazu, den Abstand in das Bild einzubeziehen und nur zu verwenden

background-position: right 0;

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

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

Und neigen dazu, mit CSS Folgendes 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 ein Element mit CSS hinzu, um dieses kleine Symbol zu enthalten. Sie können dasselbe tun, indem Sie einfach einen Bereich oder ein <i>Element in das a-Element einfügen. Ich denke jedoch, dass dies eine sauberere Methode zum Hinzufügen von Symbolen zu Schaltflächen ist und dass es browserübergreifend unterstützt wird.

Sie können die Geige hier überprüfen: http://codepen.io/anon/pen/PNzYzZ

background-position: calc(100% - 8px);

Verwenden Sie Mitte rechts als Position und fügen Sie dann einen transparenten Rand hinzu, um ihn zu versetzen.

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

Beispiel: Mit einem 100 Pixel breiten Element und einem 300 Pixel breiten Bild setzen Sie 100-300-10 = -210 Pixel, um rechts eine Lücke von 10 Pixel zu erhalten:

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

Und Sie erhalten die 80 Pixel Ihres Bildes ganz rechts links von Ihrem Element und eine Lücke von 20 Pixel rechts.

Ich weiß, dass es dumm klingen kann, aber manchmal spart es Zeit ... Ich verwende so viel vertikal (Lücke unten) für Navigationslinks mit Text unter dem Bild.

Ich bin mir jedoch nicht sicher, ob dies für Ihren Fall gilt.

Mein Problem war, dass ich das Hintergrundbild brauchte, um den gleichen Abstand vom rechten Rand zu halten, wenn die Fenstergröße geändert wird, z. B. für Tablet / Handy usw. Mein Fix besteht darin, ein Percenatge wie folgt zu verwenden:

background-position: 98% 6px;

und es bleibt an Ort und Stelle.

Ja! gut, um ein Hintergrundbild so zu positionieren, als ob 0px von der rechten Seite des Browsers statt von links - ich benutze:

background-position: 100% 0px;