Detaillierte Einführung in Hintergrundeigenschaften

background-origin: Gibt an, zu welchem ​​Teil des Containers das background-position Attribut relativ positioniert ist.

　padding-box Hintergrundbild relativ zum Padding-Feld positioniert; (Standard)

　bord Er-Box-Hintergrundbild wird relativ zum Randfeld positioniert.

　Content-Box-Hintergrundbild wird relativ zum Inhaltsfeld positioniert.

Hintergrundposition: Legen Sie die Startposition des im Container angezeigten Hintergrundbilds fest.

Standardwert: 0 0 (angezeigt vom oberen linken Punkt des Hintergrundbilds);

Wert: Int px Int px; der obere linke Fixpunkt des Hintergrundbilds liegt an der Koordinate Position des Containers, der ein negativer Wert sein kann. Ein negativer Wert bedeutet, dass der obere linke Punkt des Hintergrundbilds nicht innerhalb des Containers liegt und der darüber hinausgehende Teil ausgeblendet ist.

Wenn nur ein Wert eingestellt ist, wird der andere Wert „zentriert“ (50 %/Mitte)

Wenn Prozent verwendet wird, werden die Koordinaten wie folgt berechnet:

x (Breite des Containers – Breite des Hintergrunds Bild ) * x Prozentsatz, der überschüssige Teil wird ausgeblendet; y: (Höhe des Containers – Höhe des Hintergrundbilds) * y Prozentsatz, der Überschuss Teil ist versteckt.

Also entspricht links/oben 0 %, rechts/unten entspricht 100 % (Hintergrund). Der rechte/untere Rand des Bildes fällt mit dem Container zusammen), die Mitte entspricht 50 % (das Hintergrundbild befindet sich in der Mitte des Containers).

Hintergrundgröße: Legen Sie die Größe des Hintergrundbilds fest (IE8 unterstützt dieses Attribut nicht)

Prozent/Länge: Wenn es sich um einen Prozentsatz handelt, die Größe von Das Hintergrundbild wird mit dem Container multipliziert. Das Produkt aus Prozentsätzen. Legen Sie nur eines fest und stellen Sie das zweite auf „Automatisch“ (um das gleiche Seitenverhältnis wie das ursprüngliche Hintergrundbild beizubehalten).

Wenn beide auf 100 % eingestellt sind, füllt das Hintergrundbild den Container, aber das Seitenverhältnis ändert sich.

enthalten: Der Container enthält das gesamte Hintergrundbild gemäß einem festen Anteil des Hintergrundbilds. Die Größe des Hintergrundbilds wird entsprechend einem festen Verhältnis zum Hintergrundbild vergrößert, bis eine Seite die Grenze des Containers erreicht, ist die andere Seite oft leer (wenn es keine Wiederholung gibt).

Cover: Das Hintergrundbild wird entsprechend einem festen Seitenverhältnis vergrößert, bis es den gesamten Container ausfüllt (die kürzere Seite des Hintergrundbilds erreicht auch die Containergrenze). Ein Teil des Hintergrundbilds wird abgeschnitten, da es über den Container hinausgeht.

IE8-kompatibel:

filter: progid:DXImageTransfürm.Microsoft.AlphaImageLoader(src='absolute path',sizingMethod='scale/crop');

Zuschneiden: Die Größe des Hintergrundbildes bleibt unverändert und das Bild wird auf die Flächengröße zugeschnitten.

　Bild: Standardwert. Erhöhen oder verkleinern Sie die Größengrenze des Bereichs, um sie an die Größe des Hintergrundbilds anzupassen, was dem Effekt von Überlauf entspricht: sichtbar.

Skalieren: Skalieren Sie das Hintergrundbild, um es an die Größengrenzen des Bereichs anzupassen.

　①Kann den Hintergrundprozentsatz beliebiger Größe angeben. ②Nur für ein einzelnes Bild geeignet und kann keine Rätsel wie Bild-Sprites verwenden. ③Muss auf das absolute Pfadbild verweisen. ④Kompatibel mit ie7, 8

und höher Alle basieren auf persönlichem Verständnis. Wenn es Fehler gibt, hinterlassen Sie bitte eine Nachricht, um diese zu korrigieren.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Hintergrundeigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!