Ich habe neulich etwas gelernt, als wir die background Eigenschaften im Almanach ausgearbeitet haben. Es ist etwas so Intuitives, dass ich wohl nie darüber nachgedacht habe.
Standardmäßig ist background-position 0 0, die obere linke Ecke. Stellen Sie sich nun vor, Sie setzen es auf 50% 0. Dieses Hintergrundbild ist nun mittig oben. Es ermittelt die Größe dieses Bildes und positioniert die Mitte davon in der Mitte des Elements.
Das unterscheidet sich davon, wenn Sie z. B. ein <img> hätten und es mit left: 50%; positionieren würden. In diesem Szenario wäre der linke Rand des Bildes am Mittelpunkt. Wenn Sie es zentrieren möchten, müssen Sie es nach links ziehen (negativer Translate oder negativer Rand).
Hier ist eine Visualisierung dieses Unterschieds
Siehe den Pen Der Unterschied zwischen background-position und left von Chris Coyier (@chriscoyier) auf CodePen.
Wenn Sie also etwas wie background-position: 25% 25% setzen, positioniert dies das Bild so, dass 25% der Breite des Bildes mit 25% der Breite des Elements übereinstimmen. Und das Gleiche vertikal.
Nichts Revolutionäres hier. Ich finde es einfach clever gestaltet. Man muss nicht viel darüber nachdenken, weil es so funktioniert, wie man es erwarten würde. Natürlich, wenn ich right top für die background-position setze, wird das Bild in der oberen rechten Ecke gezeichnet. Ich denke nicht darüber nach, wie der Browser die Bildgröße und die Elementgröße berechnen und die Achsen an diesen Positionen ausrichten muss.
Interessant…
Ein Problem mit der Funktionsweise von background-position ist, wenn man negative Positionen (wie bei Bild-Sprites) wünscht. Dann ist es etwas verwirrend und in den Spezifikationen nicht gut definiert.
Ich benutze normalerweise px (und -px) für Sprites, da es viel präziser ist. Dann kann man in den Entwicklertools die Position einfach kopieren und zurück in den Code einfügen.
Besonders bei Sprites mit Bildern, die ich als Hintergrund für ein Block- oder Inline-Block-Element verwenden möchte, verwirrt mich das auch. Konnte keine Möglichkeit finden, es zum Laufen zu bringen…
Ich benutze jetzt immer Prozente, besonders bei responsiven Designs mit meinem ganzen CSS (außer bei Sprites, da scheint es einfacher zu sein, einfach Pixel zu verwenden. Danke für den Tipp!
Die Spezifikationsautoren wissen tatsächlich, wovon sie reden, oder? :) Man kann das mit einem echten Bild auch irgendwie machen. Es ist ein Hack, aber man kann dieses Verhalten mit
leftundtransformsimulierenTimothy, bist du sicher, wovon du sprichst, huh? :)
http://codepen.io/anon/pen/ogMdrq
Sieht für mich richtig aus, Patryk?
Guter Punkt, Timothy. Patryk, vergiss nicht, die Vendor-Präfixe einzuschließen, wenn du es auf Safari oder Firefox verwendest.
-webkit-transformist erforderlich und es funktioniert tatsächlich.Ja Patryk, ich schätze, er weiß, wovon er spricht…
Danke, Timothy, das wird hilfreich sein. :)
Das ist so einfach. Es funktioniert gut in Firefox und Chrome und IE ab Version 9. Irgendwelche Vorschläge für IE unter 9?
Danke für die Unterstützung, Leute. :) Robert, ich denke, Ihre einzige Option bei IE<9 sind Tabellen (CSS-Tabellenlayout, wahrscheinlich keine tatsächlichen Tabellen). So etwas. Es ist nicht so schön und erfordert vielleicht etwas mehr Arbeit, aber wenn Sie nichts zu Verrücktes tun, funktioniert es ziemlich gut!
| Man muss nicht viel darüber nachdenken, weil es so funktioniert, wie man es erwarten würde.
Tatsächlich ändert sich das Verhalten bei der Verwendung von % in background-position je nach background-size. Wie in Ihrem Beispiel ist das Hintergrundbild kleiner als der Container, in dem es verwendet wird, und eine Erhöhung auf der X-Achse lässt den Hintergrund nach rechts wandern. Wenn Sie jedoch background-position auf eine größere Größe als den Container setzen, wandert es bei einer Erhöhung auf der X-Achse nach links. Ich habe noch keine Werte für die Y-Achse geändert, aber ich nehme an, es ist dasselbe.
Und jetzt denke ich darüber nach, wie man die Position des Hintergrundbildes mit Prozenteinheiten ab der unteren rechten Position einstellt.
Ich glaube, es wird etwas komplizierter, wenn man auch background-size in Prozent angibt :)
Es wäre toll, einen zusätzlichen Wert zu haben, um den Abstand VON rechts einzustellen, das ist das Einzige, was fehlt
Schauen Sie sich die Viersatz-Syntax an: https://css-tricks.de/almanac/properties/b/background-position/
Danke. Jetzt funktioniert es. Hier ist eine andere Methode
Was die gesamte Hintergrundspezifikation besser machen würde, wäre, wenn man ihr sagen könnte, das Verhältnis der Abmessungen des Hintergrundbildes beizubehalten. Ich denke, das betrifft eher background-size. Also vielleicht background-size:50% keep-ratio/true; könnte funktionieren. Und auch etwas wie bg-size:fit keep-ratio/true; wäre schön.
Versuchen Sie es mit
background-size:50% auto;Hier ist ein verwandter background-position-Trick mit Prozentwerten, der sich für mich als sehr nützlich erwiesen hat
Dies lädt ein Hintergrundbild, das den gesamten Div bedeckt, dann fixiert es einen Punkt im Bild an einer prozentualen Position im Div (der Punkt im Bild 25% der Breite und 75% der Höhe wird bei 25%/75% im Div bleiben). Das bedeutet, dass man ein Bild mit einem Brennpunkt laden kann und sicherstellen kann, dass dieser Punkt sichtbar bleibt, unabhängig vom Seitenverhältnis des umschließenden Divs.
Ein Beispiel mit einem sehr hohen Bild, das in einem Div verwendet wird, das Größe und Form bei verschiedenen Breakpoints ändert: http://www.oc.edu/alumni/vision/summer-2014/oc-grad-lost-on-malaysia-flight/
Was Sie Jungs wirklich suchen, ist jQuery Focus Point: http://jonom.github.io/jquery-focuspoint/demos/helper/index.html
Nett! Ich habe dieses Werkzeug für Jonoms sehr cooles Plugin gemacht! Freut mich, dass es jemandem gefällt!