Warum wird mein abgeschnittenes Hintergrundbild unerwartet abgeschnitten, wenn ich „background-size: cover' und „background-attachment: Fixed' verwende?

Beschnittene Hintergrundbilder mit CSS-Hintergrundgröße: Cover, Hintergrundanhang: behoben

Bei Verwendung der CSS-Eigenschaften Hintergrundgröße: Cover und Hintergrundanhang: behoben Wenn es sich um ein Containerelement handelt, kann das Hintergrundbild unerwartet abgeschnitten werden, wenn das Element nicht die volle Größe des Ansichtsfensters hat. Dies liegt an der Kombination der beiden Eigenschaften, wie unten erläutert.

Effekt von „background-attachment: Fixed“

background-attachment: Fixed bewirkt, dass sich das Hintergrundbild wie ein Position: Fixed-Element verhält , was bedeutet, dass es nicht mehr Teil des normalen Flusses des Dokuments ist und relativ zum Ansichtsfenster stationär bleibt.

Interaktion mit Hintergrundgröße: cover

background-size: cover skaliert das Hintergrundbild so, dass es das gesamte Containerelement abdeckt. In Kombination mit „background-attachment: Fixed“ bedeutet dies, dass das Bild so skaliert wird, dass es den gesamten Ansichtsbereich abdeckt, nicht nur das Containerelement.

Ausschneiden des Hintergrundbilds

Wenn das Containerelement vorhanden ist kleiner als das Ansichtsfenster ist, wird das Hintergrundbild so zugeschnitten, dass es vertikal in das Containerelement passt. Es wird jedoch weiterhin horizontal skaliert, um die gesamte Breite des Ansichtsfensters abzudecken. Dies kann dazu führen, dass das Bild auf der linken und rechten Seite abgeschnitten wird.

Lösung

Leider gibt es keine Möglichkeit, den gewünschten Effekt zu erzielen (Bild vertikal oder horizontal, aber nicht beides, abgeschnitten). zentriert durch das Containerelement) mit reinem CSS. Dies liegt an der grundlegenden Funktionsweise der festen Positionierung in CSS.

Um den gewünschten Effekt zu erzielen, müssen Sie JavaScript verwenden, um die Eigenschaft „Hintergrundposition“ manuell relativ zur Bildlaufposition des Fensters zu aktualisieren und so eine feste Positionierung zu simulieren Positionierung, während noch die Hintergrundgröße berechnet wird: Abdeckung relativ zum Containerelement.

Das obige ist der detaillierte Inhalt vonWarum wird mein abgeschnittenes Hintergrundbild unerwartet abgeschnitten, wenn ich „background-size: cover' und „background-attachment: Fixed' verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!