Positionieren Sie ein CSS-Hintergrundbild x Pixel von rechts?

Ich denke, die Antwort ist nein, aber können Sie ein Hintergrundbild mit CSS so positionieren, dass es eine feste Anzahl von Pixeln von rechts entfernt ist?

Wenn ich background-positionWerte für x und y einstelle , scheinen diese nur feste Pixelanpassungen von links bzw. oben zu ergeben.

background-position: right 30px center;

Es funktioniert in den meisten Browsern. Eine vollständige Liste finden Sie unter: http://caniuse.com/#feat=css-background-offsets .

Weitere Informationen: http://www.w3.org/TR/css3-background/#the-background-position

Es ist möglich, das Attribut borderals Länge von rechts zu verwenden

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

Es gibt einen Weg, der jedoch nicht in jedem Browser unterstützt wird (siehe Berichterstattung hier ).

element {
  background-position : calc(100% - 10px) 0;
}

Es funktioniert in jedem modernen Browser, aber es ist möglich, dass IE9 abstürzt . Auch keine Abdeckung für = <IE8.

Soweit ich weiß, enthält die CSS-Spezifikation nicht genau das, was Sie verlangen, natürlich außerhalb von CSS-Ausdrücken. Ausgehend von der Annahme, dass Sie keine Ausdrücke oder Javascript verwenden möchten, sehe ich drei hackige Lösungen:

• Stellen Sie sicher, dass Ihr Hintergrundbild der Größe des Containers entspricht (mindestens in der Breite) und eingestellt ist background-repeat: repeatoder repeat-xwenn nur die Breite ausgeglichen ist. Dann xist es so einfach wie , Pixel von rechts Pixel erscheinen zu lassenbackground-position: -5px 0px .
• Die Verwendung von Prozentsätzen für background-positionExponate zeigt ein besonderes Verhalten, das besser zu sehen ist als hier beschrieben. Versuch es einmal. Im Wesentlichen,background-position: 90% 50% wird der rechte Rand des Hintergrundbilds 10% vom rechten Rand des Containers entfernt ausgerichtet.
• Erstellen Sie ein Div, das das Bild enthält. Legen Sie die Position des enthaltenen Elements explizit fest, position: relativefalls dies nicht bereits festgelegt wurde. Stellen Sie den Bildcontainer auf ein position: absolute; right: 10px; top: 10px;und passen Sie die letzten beiden nach Belieben an. Platzieren Sie den Bild-Div-Container in dem enthaltenden Element.

Versuche dies:

#myelement {
  background-position: 100% 50%;
  margin-right: 5px;
}

Beachten Sie jedoch, dass der obige Code das gesamte Element (nicht nur das Hintergrundbild) um 5 Pixel von rechts verschiebt. Dies könnte für Ihren Fall in Ordnung sein.

Sie können dies in CSS3 tun:

background-position: right 20px bottom 20px;

Es funktioniert in Firefox, Chrome, IE9 +

Quelle: MDN

Bildumgehung mit transparenten Pixeln rechts als rechtem Rand.

Die Problemumgehung für dasselbe besteht darin, ein PNG- oder GIF-Bild (Bilddateiformate, die Transparenz unterstützen) zu erstellen, dessen transparenter Bereich rechts im Bild genau der Anzahl der Pixel entspricht, für die Sie einen rechten Rand angeben möchten ( zB: 5px, 10px usw.)

Dies funktioniert konsistent über feste Breiten sowie Breiten in Prozent. Praktisch eine gute Lösung für Akkordeon-Header mit einem Plus- / Minus- oder Aufwärts- / Abwärtspfeilbild rechts im Header!

Nachteil: Leider können Sie JPG nur verwenden, wenn der Hintergrundbereich des Containers und die Hintergrundfarbe des CSS-Hintergrundbilds dieselbe flache Farbe haben (ohne Farbverlauf / Vignette), meistens weiß / schwarz usw.

Wenn Sie in diesen Tagen moderner Browser zufällig über dieses Thema stolpern, können Sie Pseudo-Class verwenden: danach, um praktisch alles mit dem Hintergrund zu tun.

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

Dieses CSS fügt den Hintergrund in die untere rechte Ecke des Elements ".container" mit 20px Abstand auf der rechten Seite ein.

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

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

Fügen Sie einfach die Pixelauffüllung in das Bild ein - fügen Sie 10px oder was auch immer zur Leinwandgröße des Bildes in Photohop hinzu und richten Sie es in CSS richtig aus.

Ich habe versucht, eine ähnliche Aufgabe auszuführen, um einen Dropdown-Pfeil immer auf der rechten Seite der Tabellenüberschrift zu erhalten, und habe diesen gefunden, der in Chrome und Firefox zu funktionieren schien, aber Safari hat mir mitgeteilt, dass es sich um eine ungültige Eigenschaft handelt.

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

Nachdem ich ein bisschen im Inspektor herumgespielt hatte, kam ich auf diese browserübergreifende Lösung, die in IE8 +, Chrome, Firefox und Safari sowie in reaktionsschnellen Designs funktioniert.

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

Hier ist ein Codepen, wie es aussieht und funktioniert. Codepen wurde mit SCSS geschrieben - http://cdpn.io/xqGbk

Wenn Sie nur die x-Achse angeben möchten, können Sie Folgendes tun:

background-position-x: right 100px;

Eine andere Lösung, die ich nicht erwähnt habe, ist die Verwendung von Pseudoelementen. Ich glaube, diese Lösung funktioniert mit jedem CSS 2.1-kompatiblen Browser (≥ IE8, ≥ Safari 2, ...) und sollte auch reagieren:

element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}

Beispiel : Das Element zB. Ein quadratisches 100px (ohne Berücksichtigung von Rändern) hat ein 10px-Polster und ein Hintergrundbild sollte innerhalb des rechten Polsters angezeigt werden. Dies bedeutet, dass das Pseudoelement ein Quadrat mit einer Größe von 80 Pixel ist. Wir wollen es mit rechts an den rechten Rand des Elements kleben: -10px; . Wenn wir das Hintergrundbild 5px vom rechten Rand entfernt haben möchten, müssen wir das Pseudoelement 5px vom rechten Rand des Elements mit rechts entfernen: -5px; ... Testen Sie es selbst hier: http://jsfiddle.net/yHucT/

Wenn der Behälter eine feste Höhe hat: Tweek die Prozentsätze (Hintergrundposition), bis sie richtig passen.

Wenn der Container eine dynamische Höhe hat: Wenn Sie eine Auffüllung zwischen Ihrem Hintergrund und Ihrem Container wünschen (z. B. wenn benutzerdefinierte Stileingaben ausgewählt werden), fügen Sie Ihre Auffüllung zu Ihrem Bild hinzu und stellen Sie die Hintergrundposition auf rechts oder unten ein.

Ich bin über diese Frage gestolpert, als ich versucht habe, den Hintergrund für ein Auswahlfeld zu ermitteln, das beispielsweise 5 Pixel rechts von meiner Auswahl passt. In meinem Fall ist mein Hintergrund ein Pfeil nach unten, der das grundlegende Dropdown-Symbol ersetzen würde. In meinem Fall bleibt die Auffüllung für den Hintergrund immer gleich (5-10 Pixel von rechts), sodass das tatsächliche Hintergrundbild leicht geändert werden kann (wobei die Abmessungen auf der rechten Seite um 5-10 Pixel breiter werden).

Hoffe das hilft!

Sie können Ihr Hintergrundbild in einem Editor so positionieren, dass es x Pixel von der rechten Seite entfernt ist.

background: url(images_url) no-repeat right top;

Das Hintergrundbild wird oben rechts positioniert, scheint jedoch x Pixel von rechts zu sein.

Das Ändern der Prozentsätze von links ist für meinen Geschmack etwas spröde. Wenn ich so etwas brauche, neige ich dazu, mein Container-Styling einem Wrapper-Element hinzuzufügen und dann den Hintergrund auf das innere Element mit anzuwendenbackground-position: right bottom

<style>
    .wrapper {
        background-color: #333;
        border: solid 3px #222;
        padding: 20px;
    }
    .bg-img {
        background-image: url(path/to/img.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .content-breakout {
        margin: -20px
    }
</style>

<div class="wrapper">
    <div class="bg-img">
        <div class="content-breakout"></div>
    </div>
</div>

Die .content-breakoutKlasse ist optional und ermöglicht es Ihrem Inhalt, bei Bedarf in das Padding einzusteigen (negative Randwerte sollten mit den entsprechenden Werten im Wrapper-Padding übereinstimmen). Es ist ein wenig ausführlich, funktioniert aber zuverlässig, ohne sich um die relative Positionierung des Bildes im Vergleich zu seiner Breite und Höhe kümmern zu müssen.

Es ist schon lange her, seit diese Frage gestellt wurde, aber ich bin gerade auf dieses Problem gestoßen und habe es bekommen, indem ich Folgendes getan habe:

background-position:95% 50%;

Lösung für negative Werte. Passen Sie den Abstand nach rechts an, um das Bild zu verschieben.

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

Dies funktioniert in Chrome 27, ich weiß nicht, ob es gültig ist oder nicht oder was andere Browser damit machen. Das hat mich überrascht.

background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;

Funktioniert für alle echten Browser (und für IE9 +):

background-position: right 10px top 10px;

Ich benutze es, um WordPress-Themes zu RTL. Siehe Beispiel: Temporäre Website oder die echte Website wird bald verfügbar sein. Schauen Sie sich die Symbole an den rechten Ecken der großen DIVs an.

Besser für alle Hintergründe: URL ('../ images / bg-menu-dropdown-top.png') links 20px oben no-repeat! Wichtig;