Hintergrundbezogene Eigenschaften in CSS

background-origin: Gibt an, zu welchem ​​Teil des Containers die Eigenschaft „background-position“ relativ positioniert ist.

Hintergrundbild des Füllfeldes wird relativ zum Füllfeld positioniert (Standard)

Hintergrundbild des Randfeldes wird relativ zum Randfeld positioniert; Das Hintergrundbild wird relativ zum Inhaltsfeld positioniert.

background-position:

Legt 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 nach der folgenden Formel berechnet :

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

Also links/oben entspricht 0 %, rechts/unten entspricht 100 % (der rechte/untere Rand des Hintergrundbilds stimmt mit dem Container überein) und die Mitte entspricht 50 % (dem Hintergrund). Das Bild 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:DXImageTransform.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. Dies entspricht dem Effekt von Überlauf: sichtbar.

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

　①Kann keinen Prozentwert für die Hintergrundgröße angeben②Nur für ein einzelnes Bild geeignet und kann keine Bild-Sprites und andere Rätsel verwenden③Absolute Pfadbilder müssen referenziert werden④Kompatibel mit ie7, 8

Das obige ist der detaillierte Inhalt vonHintergrundbezogene Eigenschaften in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!