Detaillierte Erklärung des Hintergrund-Positionsprozentsatzprinzips

Als ich heute jemandem beim Anpassen des Codes half, sah ich einen Stil:

Hintergrundposition: 50 % 0;
Hintergrundgröße: 100 % automatisch;

Bei background-size:100% auto bedeutet dies, dass die Breite des Hintergrundbildes der Elementbreite * 100 % entspricht und die Höhe proportional skaliert wird. Weitere Einzelheiten finden Sie im CSS3-Hintergrund.

Es ist naheliegend anzunehmen, dass der Prozentsatz der Hintergrundposition auf Grundlage der Breite des übergeordneten Elements berechnet wird, aber bei der Hintergrundposition verhält es sich nicht wirklich so. Sie folgt ihren eigenen Prinzipien. Es folgt eine ausführliche Einführung.

1. Äquivalentes Schreiben

Beim Lesen verschiedener Tutorials gibt es folgende gleichwertige Schreibmethoden:

• oben links, links oben entspricht 0% 0%.
• oben, oben Mitte, oben Mitte entsprechen 50 % 0 %.
• rechts oben, oben rechts entspricht 100% 0%.
• links, links Mitte, Mitte links entsprechen 0 % 50 %.
• Mitte, Mitte Mitte entspricht 50% 50%.
• rechts, rechts Mitte, Mitte rechts entspricht 100 % 50 %.
• unten links, links unten entspricht 0% 100%.
• unten, unten Mitte, unten Mitte entsprechen 50 % 100 %.
• unten rechts, rechts unten entspricht 100% 100%.

Warum entspricht links oben 0 % 0 % und rechts unten 100 % 100 %?

2. Formel zur Berechnung des Prozentsatzes der Hintergrundposition

Hintergrundposition: xy;
x: {Containerbreite - Breite des Hintergrundbilds}*x Prozent, der überschüssige Teil wird ausgeblendet.
y: {Containerhöhe - Höhe des Hintergrundbildes}*y Prozent, der überschüssige Teil wird ausgeblendet.

Mit dieser Formel ist die 100 %-Schreibmethode leicht verständlich, und auch die verschiedenen oben genannten gleichwertigen Schreibmethoden lassen sich durch Berechnung leicht nachvollziehen.

3. Beispiele

1. Hintergrundposition:Mitte Mitte entspricht Hintergrundposition:50% 50% entspricht Hintergrundposition:?px ?px

Das im Beispiel verwendete Hintergrundbild ist wie folgt [Größe: 200px*200px]:

Das Hintergrundbild wird innerhalb des Containers zentriert.

<style type="text/css">
.wickeln{
    Breite: 300px;
    Höhe: 300px;
    Rand: 1px, durchgehend grün;
    Hintergrundbild: URL (Bild/Bild.png);
    Hintergrundwiederholung: keine Wiederholung;
/* Hintergrundposition: 50 % 50 %;*/
    Hintergrundposition: Mitte Mitte;
}
</Stil>
<div Klasse="wrap">
</div>

Der Effekt besteht darin, das Hintergrundbild zu zentrieren

Wie oben erwähnt, kann das Hintergrundbild durch Festlegen von Prozentwerten und Schlüsselwörtern zentriert werden. Wenn Sie das Bild durch Festlegen eines bestimmten Werts zentrieren möchten, was sollten Sie festlegen?

Nach der obigen Formel:

x=(Containerbreite-Hintergrundbildbreite)*x Prozentsatz=(300px-200px)*50%=50px;

y=(Containerhöhe-Hintergrundbildhöhe)*y-Prozentsatz=(300px-200px)*50%=50px;

Das heißt, legen Sie background-postion:50px 50px;

Probieren Sie es aus:

<style type="text/css">
.wickeln{
    Breite: 300px;
    Höhe: 300px;
    Rand: 1px, durchgehend grün;
    Hintergrundbild: URL (Bild/Bild.png);
    Hintergrundwiederholung: keine Wiederholung;
/* Hintergrundposition: 50 % 50 %;*/
/* Hintergrundposition: Mitte Mitte;*/
    Hintergrundposition: 50px 50px;
}
</Stil>
<div Klasse="wrap">
</div>

Der Effekt ist ebenfalls zentriert.

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des Prinzips der Hintergrundposition in Prozent. Weitere relevante Inhalte zur Hintergrundposition in Prozent finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!