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

Sie können es in CSS3 machen:

background-position: right 20px bottom 20px;

Es funktioniert in Firefox, Chrome, IE9+

Source : MDN

Answer 2

Bildumgehung mit transparenten Pixeln auf der rechten Seite, die als rechter Rand dienen.

Um dies zu umgehen, erstellen Sie ein PNG- oder GIF-Bild (Bilddateiformate, die Transparenz unterstützen), dessen transparenter Teil auf der rechten Seite des Bildes genau der Anzahl von Pixeln entspricht, die Sie mit einem rechten Rand versehen möchten (z. B.: 5px, 10px usw.).

Dies funktioniert sowohl bei festen Breiten als auch bei prozentualen Breiten gut. Praktisch eine gute Lösung für Akkordeon-Kopfzeilen mit einem Plus/Minus- oder Auf/Ab-Pfeil-Bild auf der rechten Seite der Kopfzeile!

Nachteil: Leider können Sie JPG nur dann verwenden, wenn der Hintergrund des Containers und die Hintergrundfarbe des CSS-Hintergrundbildes dieselbe einheitliche Farbe haben (ohne Farbverlauf/Vignette), meist weiß/schwarz usw.

Answer 3

Wenn Sie in den heutigen modernen Browsern über dieses Thema stolpern, können Sie die Pseudoklasse :after verwenden, um praktisch alles mit dem Hintergrund zu machen.

.container:after{
    content:"";
    position:absolute;
    right:20px;
    background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}

dieses CSS setzt den Hintergrund in die rechte untere Ecke des Elements ".container" mit 20px Abstand auf der rechten Seite.

Siehe zum Beispiel diese Fiedel http://jsfiddle.net/h6K9z/226/

Answer 4

Wenn Sie nur die x-Achse angeben möchten, können Sie wie folgt vorgehen:

background-position-x: right 100px;

Answer 5

En zutreffendste Antwort ist die neue vierwertige Syntax für background-position, aber bis alle Browser unterstützen es Ihr bester Ansatz ist eine Kombination der früheren 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+ */