Untersuchen der Verwendung von Prozentwerten in der Eigenschaft „Hintergrundposition“

Auswirkungen der Hintergrundposition auf die Anzeige von Hintergrundbildern

Als ich vor zwei Tagen das Bild auf der Startseite des Projekts ersetzte, stieß ich auf ein Problem. Die vorherige Stileinstellung war „Hintergrundposition: Mitte“. Wenn die Seite verkleinert oder vergrößert wurde, änderte sich auch der Bereich, in dem das Hintergrundbild angezeigt wurde. Nachdem ich es jetzt nach links oben geändert habe, ändert sich die Bildposition nicht, egal wie sich die Seitengröße ändert. Das ergibt keinen Sinn. Sollte background-position:center das Hintergrundbild nicht in der Mitte des Elements anzeigen? Warum nimmt es trotzdem die gesamte Elementfläche ein? Bezieht sich dieser Mittelpunkt auf die Mitte des Hintergrundbildes oder auf die Mitte des Elements?

Eigenschaft „Hintergrundposition“

background-position ist eine Sammlungseigenschaft, die die Startposition des Hintergrundbildes festlegt, nämlich background-position-x und background-position-y. Die verfügbaren Werte sind links, rechts, oben, unten sowie feste Pixelwerte und Prozentwerte.

• Hintergrundposition-x: links (entspricht 0 %)
• Hintergrundposition-x: rechts (entspricht 100 %)
• Hintergrundposition-y: oben (entspricht 0 %)
• Hintergrundposition-x: unten (entspricht 100 %)

Abgesehen von der festen Positionierung des Pixelwerts werden wir dieses Mal hauptsächlich die Auswirkungen des Prozentwerts auf die Position des Hintergrundbilds untersuchen. Normalerweise sollte der Prozentwert ein Prozentsatz relativ zur Breite und Höhe des Elements sein, aber die tatsächliche Leistung ist nicht der Fall.

Ist-Zustand als Prozentwert angegeben

Hinweis: Die Breite und Höhe des als Hintergrundelementcontainer verwendeten Elements sind auf 100 %, 100 % eingestellt und es gibt keinen Rand und keine Polsterung
Beispiel 1:

Hintergrundgröße: 100px 100px;
Hintergrundposition: 100 % 100 %;

Sie können sehen, dass, wenn die Hintergrundposition auf 100 % eingestellt ist, das Hintergrundbild in der unteren rechten Ecke des Fensters angezeigt wird, anstatt über den Elementbereich hinauszulaufen. Ändern Sie als Nächstes die Position. Beispiel 2:

Hintergrundgröße: 100px 100px;
Hintergrundposition: 50 % 50 %;

Sie können sehen, dass sich das Hintergrundbild jetzt in der Mitte des Elements befindet. Um zu beweisen, dass es in der Mitte ist, habe ich zum Vergleich ein untergeordnetes Element mit einem zentrierten Stil verwendet. Sie können sehen, dass es vom untergeordneten Element eingerahmt wird.

Aus den beiden obigen Beispielen können wir Folgendes ersehen:

Wenn die Hintergrundposition auf 100 % 100 % eingestellt ist, befindet sich das Bild in der unteren rechten Ecke. Zu diesem Zeitpunkt ist der Pixelwert von Hintergrundposition-x gleich „der Breite des Containerelements minus der Breite des Hintergrundbilds“ und der Pixelwert von Hintergrundposition-y ist gleich „der Höhe des Containerelements minus der Höhe des Hintergrundbilds“;

Wenn die Hintergrundposition auf 50 % 50 % eingestellt ist, wird das Bild innerhalb des Elements zentriert. Zu diesem Zeitpunkt ist der Pixelwert von Hintergrundposition-x gleich „der Breite des Containerelements multipliziert mit 50 % minus 50 % der Breite des Hintergrundbilds“ und der Pixelwert von Hintergrundposition-y ist gleich „der Höhe des Containerelements multipliziert mit 50 % minus 50 % der Höhe des Hintergrundbilds“;

Wenn w die Breite des Containerelements, h die Höhe des Containerelements, bw die Breite des Hintergrundbilds und bh die Höhe des Hintergrundbilds darstellt, können die beiden obigen Beispiele eine Formel ergeben:

Hintergrundposition-x: Prozent = (B – SW) * Prozent
Hintergrundposition-y: Prozent = (h - bh) * Prozent

Wenn das Element über eine Polsterung verfügt:

Polsterung: 100px 20px 50px 50px;
Hintergrundposition: 0 % 0 %;

Sie können sehen, dass sich das Hintergrundbild in der oberen linken Ecke des Polsterbereichs befindet, sodass der Prozentsatz der Hintergrundposition tatsächlich an der Berechnung der Breite und Höhe des Containerelements = Inhalt + Polsterung teilnimmt
Wenn die Hintergrundgröße auf 100 % 100 % eingestellt ist, verschiebt sich die Hintergrundposition nicht, unabhängig vom eingestellten Prozentsatz.

Umgekehrt tritt nach dem Festlegen des Prozentsatzes ein negativer Versatz auf, wenn die Größe des Hintergrundbilds größer als die Elementgröße ist.
OK, jetzt verstehe ich diese Eigenschaft endlich. Die Beschreibungen einiger CSS-Eigenschaften sind nicht genau genug und können leicht zu Missverständnissen führen. Nur durch Übung können wir wahres Wissen erlangen!

Dies ist das Ende dieses Artikels zur Untersuchung der Verwendung von Prozentwerten in der Eigenschaft „Hintergrundposition“. Weitere relevante Inhalte zu Prozentwerten für die Hintergrundposition finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!