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

El zutreffendste Antwort ist die neue vierwertige Syntax für background-position, aber bis alle Browser unterstützen es Am besten ist es, wenn Sie die vorangegangenen Antworten in der folgenden Reihenfolge kombinieren:

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+ */

Answer 2

Ein einfacher, aber schmutziger Trick besteht darin, den gewünschten Versatz einfach zu dem Bild hinzuzufügen, das Sie als Hintergrund verwenden.

Answer 3

Dies funktioniert bei Die meisten moderne Browser... abgesehen vom IE (Browser-Unterstützung) . Obwohl diese Seite >= IE9 als unterstützt auflistet, stimmten meine Tests damit nicht überein.

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

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

Für mich ist dies der sauberste und logischste Weg, um einen Rand nach rechts zu erreichen. Ich verwende auch eine Ausweichlösung mit border-right: 10px solid transparent; für IE.

Answer 4

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

Answer 5

Ok, wenn ich Ihre Frage richtig verstanden habe, würden Sie dies tun;

Sie haben Ihren DIV-Container namens #main-container y .my-element die in ihm steckt. Nutzen Sie dies für den Anfang;

#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 nehme an, dass Sie das tun, daher meine Namensänderung oben).