Wenn Sie ein background-image in CSS 20 Pixel vom linken und 10 Pixel vom oberen Rand positionieren müssen, ist das einfach. Sie können background-position: 20px 10px; verwenden. Aber was, wenn Sie es 20 Pixel vom rechten und 10 Pixel vom unteren Rand positionieren möchten?
Nehmen wir auch an, wir kennen die genaue Breite und Höhe des Elements nicht, was aufgrund von flexiblen Layouts und dynamischen Inhalten wahrscheinlich ist. Wenn wir das täten, könnten wir einfach ein wenig auf einem Notizblock rechnen und die normale background-position-Syntax verwenden.
Eine durchaus vernünftige Anfrage, wie sie sagen. Hier sind einige Möglichkeiten, wie Sie das tun können.
Die Syntax mit vier Werten für background-position
Dies ist der einfachste Weg. Sie kombinieren Längenwerte mit einem der Schlüsselwörter top/right/bottom/left (nicht center). Also für unser Beispiel
background-position: right 20px bottom 10px;Damit können Sie ein background-image von einer der vier Ecken eines Elements absetzen.
Browserunterstützung, laut MDN: Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari/iOS 7+. Die größte Gefahr ist Android.
Ich habe Android 4.0, 4.1 und 4.2 getestet, und es hat nicht funktioniert. Aber Android 4.4 hat es unterstützt.
Verwendung von calc()
Sie können weiterhin die Zwei-Wert-Syntax von background-position verwenden, aber mit Längen, die über calc() erstellt wurden. Zum Beispiel:
background-position: calc(100% - 20px) calc(100% - 10px); Die Browserunterstützung ist etwas besser, mit Chrome ab Version 19+, Firefox ab Version 4+ und Safari ab Version 6+ (alle mit Präfix).
Der Android-Standardbrowser hatte die gleiche Unterstützung wie die oben genannte Vier-Wert-Syntax.
Verwendung von JavaScript
Wenn Sie eine *perfekte* Browserunterstützung benötigen, stelle ich mir vor, dass der einzige Weg JavaScript ist. Messen Sie die Höhe/Breite des Elements, kennen Sie die Größe des background-image, und passen Sie dann das CSS nach Bedarf an.
Verwendung von jQuery
var el = $(".example"),
bgWidth = 20,
bgHeight = 20;
el.css({
"background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) + "px"
});Demo
Hier sind alle drei Wege
IE9 stürzt ab, wenn Sie calc() für background-position verwenden. Habe ich gerade selbst festgestellt.
Ja, meiner stürzt auch in IE9 ab, aber als ich die Rückwärtskompatibilitätseinstellung in IE6 ausprobiert habe, funktionierte es überraschenderweise perfekt! Welche IE9-Version verwenden Sie?
Okay, ich gebe zu, ich wusste nichts von den 4 Werten für die
background-position-Eigenschaft. Gut zu wissen.Und
calcmit Hintergrundbildern war in der Vergangenheit ein Problem. IE9 ist mehr oder weniger die einzige Erinnerung daran.Im Grunde ist die einzige Möglichkeit, dieses Problem zu lösen, ein Container-Element und ein separates Element für den Hintergrund hinzuzufügen. Keine der 3 Lösungen funktioniert übrigens auf Android 4.3. Oder die richtige Lösung sollte ein halber Stern sein
Halber Stern ist richtig.
Oder schneiden Sie das Bild zu. Nicht ideal… aber es funktioniert!
Nun, das sind nette Methoden, um den Versatz von Hintergrundbildern einzustellen, aber aufgrund der schlechten Browserunterstützung würde ich es nicht verwenden. Normalerweise schneide ich das Bild so zu, dass ich auch die Leerzeichen einschließe. Die andere Möglichkeit wäre, ein Element absolut zu positionieren und darauf den Hintergrund zu setzen, aber das ist zu viel Aufwand.
Auch eine sehr nette Lösung, von der ich gehört habe, ist die Einstellung eines transparenten Rahmens für das Element mit dem Hintergrund. Wenn wir beispielsweise möchten, dass der Hintergrund rechts, aber mit 10 Pixeln Abstand ist, könnten wir dem Element einen border-right: 10px solid transparent geben.
Beachten Sie, dass transparente Rahmen nicht unbedingt transparent sind – nicht wegen alter Browser, sondern wegen Benutzer-Zugänglichkeitsoptionen.
Wenn Benutzer Autorenfarben deaktivieren oder ein kontrastreiches Thema anwenden (was alle Browser tun können), übernehmen transparente Rahmen die Vordergrundfarbe. Was sie in diesem Beispiel sehen würden, ist ein dicker Rahmen auf der rechten Seite des Elements.
Wenn Text diesen Bereich überlappt, wäre das ein ernstes Zugänglichkeits problem.
Aber wenn das nicht der Fall ist (was wahrscheinlicher ist), dann ist es kein Problem, aber wahrscheinlich nicht das, was Sie beabsichtigt haben. Letztendlich mag es egal sein, aber es ist erwähnenswert.
Sie können diesen Trick jedoch zu Ihrem Vorteil nutzen. Wenn beispielsweise ein Bereich mit einem Hintergrund eingefärbt ist, um ihn visuell vom umgebenden Inhalt abzugrenzen, geht diese Schattierung – und der dadurch entstehende visuelle Effekt – in einer kontrastreichen Ansicht verloren. Aber wenn das gesamte Element einen 1 Pixel breiten transparenten Rahmen hat, wird der Rahmen sichtbar und erzeugt einen vergleichbaren Effekt :-)
Ist es sicher, die Vier-Wert-Syntax mit Fallback zu calc() zu verwenden, so?
Nein. IE9 (wenn ich mich nicht irre, vielleicht ist es IE8) stürzt ab, wenn calc() in background-position verwendet wird.
Was, wenn Sie das Bild um 180 Grad drehen? Hat vielleicht auch keine großartige Browserunterstützung, aber vielleicht würde die obere linke Ecke funktionieren?
Habe es nicht ausprobiert, bin wahrscheinlich zu weihnachts müde, um geradeaus zu denken
Großartiger Artikel,
Ich liebe es, heutzutage mit CSS zu spielen
Danke, weiterschreiben und weiterhelfen :)
Ich genieße all Ihre kleinen Tipps, aber was wäre das gewisse Extra, wenn Sie mir sagen könnten, warum es mir wichtig sein könnte, so etwas wie ein Hintergrundbild zu verschieben. Vielleicht ein paar praktische Beispiele, die mich denken lassen "oh ja" oder mir helfen, es jemandem zu zeigen, der es vielleicht gebrauchen könnte.
Oh! Das ist einfach und erspart viel Kopfzerbrechen.
Vielen Dank, Chris! Ich hatte die Vier-Wert-Syntax total vergessen.
Wirklich ein tolles Tutorial für mich. Die Vier-Wert-Syntax ist mir völlig neu. Danke für Ihren Beitrag.
verdammt! Es ist wirklich nützlich, die 4 Werte für die background-position-Eigenschaft zu verwenden. Danke!
Das lässt die Front-End-Entwickler in uns allen erschaudern, aber die andere Möglichkeit, ein Hintergrundbild vom rechten Rand abzugrenzen, ist, die gewünschte Füllung dem eigentlichen Bild in einem Bildeditor hinzuzufügen und 'right' als horizontale Position anzugeben. Hoffentlich erlaubt die nächste CSS-Spezifikation explizite rechte und untere Positionen, wie die aktuelle Spezifikation für links und oben. Wäre sehr daran interessiert zu erfahren, warum das noch nicht der Fall ist.
Bei responsivem Design müsste die JS-Lösung aktiv auf Fenstergrößenänderungen oder Ausrichtungsänderungen prüfen (einige Geräte/Browserkombinationen ändern die Ansichtsfensterbreite bei Ausrichtungsänderungen, kann getestet werden unter http://www.matanich.com/test/viewport-width/). Ich habe manchmal Symbole, die 'Ja' und 'Nein' auf der gesamten Website darstellen, also lege ich sie einfach in separate Dateien und kodere sie oft sogar in den CSS (da sie auf vielen Seiten erscheinen und sowieso geladen werden müssen – warum nicht mit der CSS-Datei laden). Wenn ich den Hintergrund von einem Sprite laden muss oder wenn ich diesen Platz von rechts als prozentuale Füllung habe (wie ich es oft bei responsivem Design tue), dann packe ich ihn in :before oder :after – wer würde schon ein echtes Element wollen, wenn er sich mit Pseudo-Elementen davon befreien kann.
Ich versuche, einen Anwendungsfall hier zu sehen, aber ich würde wahrscheinlich ein inneres Element oder ein größeres Bild wählen. Es kommt selten vor, dass ich in einer Situation bin, in der ich benutzerdefiniertes CSS hinzufügen kann, aber keine Markup.