Wie funktioniert die CSS-Berechnung für Hintergrundprozentwerte?

Ein Prozentwert für background-position positioniert nicht den Ursprung eines Hintergrundbilds in Bezug auf den Hintergrundpositionierungsbereich. Es positioniert das gesamte Bild. Dies bedeutet, dass die Abmessungen des Bildes selbst ebenfalls berücksichtigt werden (nach der Größenanpassung mit background-size ).

Eine Hintergrundposition von 100% 100% ist analog zu right bottom und positioniert ein Bild so, dass die untere rechte Ecke des Bildes die untere rechte Ecke des Hintergrundbereichs berührt. In ähnlicher Weise ist 50% 50% analog zu center center und platziert den Mittelpunkt eines Bildes auf dem Mittelpunkt des Hintergrundbereichs.

Stellen Sie sich vor, Sie würden eine rechteckige Kachel um das Innere eines rechteckigen Rahmens schieben; Bewegen Sie es ganz nach rechts (dh 100%) bedeutet, dass die rechte Kante die rechte Seite des Rahmens berührt (da Sie es nicht durch den Rahmen schieben können), und verschieben Sie es auf die Unten bedeutet, dass die untere Kante die Unterseite des Rahmens berührt.

Im Allgemeinen ist für jeden background-position: x y , bei dem die beiden Werte Prozentsätze sind, der x-Punkt des Bildes mit dem x-Punkt des Hintergrundbereichs ausgerichtet und der y-Punkt des Bildes ist mit dem y-Punkt des Bildes ausgerichtet Hintergrundbereich.

CSS2.1 Beschreibung ist schmerzhaft zu lesen, damit ich ' Stattdessen gebe ich CSS3 Hintergründe und Grenzen an, wo es sogar ein grafisches Beispiel gibt:

  

Bei einem Wertepaar von "0% 0%" beispielsweise wird die obere linke Ecke des Bildes mit der oberen linken Ecke der Füllkante der Box ausgerichtet. Ein Wertepaar von "100% 100%" platziert die untere rechte Ecke des Bildes in der unteren rechten Ecke des Bereichs. Bei einem Wertpaar von "75% 50%" soll der Punkt 75% quer und 50% abwärts das Bild an der Stelle 75% quer und 50% unten platziert werden.

     

Aber wenn du wie ich bist, und du bist schrecklich darin, dies in Echtzeit zu visualisieren, dann denke nur an ein Schiebepuzzle.

Beachten Sie, dass dies nicht für absolute Werte gilt; Absolutwerte positionieren den Ursprung des Bildes. Der Bezugspunkt kann jedoch geändert werden, wenn Sie den absoluten Wert an der rechten und / oder unteren Seite verankern. Beispiel: right 10px bottom 10px positioniert ein Hintergrundbild 10 Pixel entfernt von der unteren rechten Ecke des Hintergrundbereichs.

Wenn Sie ein Hintergrundbild positionieren möchten, dessen Größe 100% des Hintergrundbereichs beträgt, können Sie keinen Prozentsatz verwenden, da Sie eine Kachel, die zu ihrem Rahmen passt, nicht verschieben können (was übrigens passieren würde) entweder für das langweiligste Puzzle oder den perfekten Streich). Dies gilt unabhängig davon, ob die systeminternen Dimensionen des Hintergrundbilds mit den Dimensionen des Elements übereinstimmen oder Sie explizit background-size: 100% festlegen. Um das Bild zu positionieren, müssen Sie stattdessen einen absoluten Wert verwenden (ohne die Schiebepuzzle-Analogie zu verwenden).

Wie Woodrow sagte, wegen Ihrer Hintergrund-Größenregel, die sich für jeden Hintergrund bewerben wird, wird jeder Hintergrund ein Drittel Ihrer Flagge nehmen, also 0% ist der Ausgangspunkt für den ersten Hintergrund.

Der Zweite wird wieder ein Drittel nehmen, aber um leichter zu verstehen, denke 50%, es ist mehr als 50% im Zentrum, deshalb ist er in der Mitte und nimmt ein Drittel des Containers. Sie können Center anstelle von 50% verwenden, wenn Sie möchten.

Hier ist mozilla's Dokument über Hintergrund-Position

Die Eigenschaft background-position legt die Position des Zentrums des Hintergrunds fest. Sie haben angegeben, dass alle Hintergründe eine Breite von calc(100%/3) und eine Höhe von 100% haben. Dann haben Sie die x-Position für die Mitte jedes der drei Hintergründe festgelegt (die y-Position ist standardmäßig auf 50% eingestellt). .