Warum werden meine festen Hintergrundbilder abgeschnitten, wenn ich „background-size: cover' verwende?

CSS-Hintergrundgröße: Cover und Hintergrundanhang: Ausschneiden von Hintergrundbildern behoben

Problem:

In einer Liste von Abbildungen mit Hintergrundbildern, die auf „Abdecken“ und „Fest“ eingestellt sind, werden die Bilder abgeschnitten, wenn die Abbildung vom entfernt ist Ansichtsfenster.

Erklärung:

Dieses Verhalten liegt in der Funktionsweise der „festen“ Positionierung in CSS begründet. Bei der „festen“ Positionierung wird das Hintergrundbild aus dem Positionierungskontext des Elements entfernt und am Ansichtsfenster ausgerichtet. Infolgedessen wird der „cover“-Wert in „background-size: cover“ relativ zum Ansichtsfenster berechnet, nicht zum Element selbst.

Vorgeschlagene Lösung:

Die Verwendung von „fester“ Positionierung und „Cover“ für Hintergrundbilder ist mit reinem CSS nicht möglich.

Alternative Lösung:

Anstelle einer „festen“ Positionierung verwenden Sie „scroll“ für den Hintergrundanhang und binden Sie einen Ereignis-Listener an das Scroll-Ereignis in JavaScript. Dadurch wird die Hintergrundposition basierend auf der Scroll-Distanz des Fensters manuell aktualisiert, wodurch eine feste Positionierung simuliert und gleichzeitig die „Abdeckung“ relativ zum Containerelement beibehalten wird.

Das obige ist der detaillierte Inhalt vonWarum werden meine festen Hintergrundbilder abgeschnitten, wenn ich „background-size: cover' verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!