Wie kann ich das Ausschneiden von Hintergrundbildern mit „background-size: cover' und „background-attachment: Fixed' in CSS verhindern?

Hintergrundbilder mit CSS ausschneiden: Hintergrundgrößen-Cover und Hintergrundanhänge verstehen behoben

Bei der Verwendung von Hintergrundbildern in einer Liste von Abbildungen, Wenn Sie sowohl „background-size:cover“ als auch „background-attachment:fixed“ festlegen, kann es bei einem Versatz zu Beschneidungsproblemen kommen. Obwohl dieses Verhalten der festen Positionierung in CSS eigen ist, werden wir eine reine CSS-Lösung untersuchen, um dieses Problem zu mildern.

CSS-Mechaniken:

Die Kombination aus Hintergrundanhang: fest und Hintergrund -size: cover bewirkt, dass sich das Hintergrundbild wie ein ansichtsbezogenes „festes“ Bild verhält und der Abdeckungswert relativ zur Größe des Ansichtsfensters und nicht zum Element berechnet wird. Dies erklärt, warum das Bild richtig abgedeckt wird, wenn das Element das Ansichtsfenster ausfüllt, aber beschnitten wird, wenn es kleiner ist.

Vorgeschlagene Lösung:

Leider ist eine reine CSS-Lösung nicht möglich, da eine feste Positionierung nicht mit vereinbar ist das gewünschte Ausrichtungsverhalten. Die Verwendung eines an das Scroll-Ereignis gebundenen JavaScript-Ereignis-Listeners kann jedoch eine feste Positionierung simulieren und die gewünschte Ausrichtung beibehalten.

Konkret würden wir einen Scroll-Ereignis-Listener binden und die Eigenschaft „Hintergrundposition“ basierend auf dem aktuellen Scrollen manuell aktualisieren position, um den Effekt einer festen Positionierung zu erzielen und gleichzeitig die Hintergrundgröße: Abdeckung relativ zum Containerelement zu berechnen.

Das obige ist der detaillierte Inhalt vonWie kann ich das Ausschneiden von Hintergrundbildern mit „background-size: cover' und „background-attachment: Fixed' in CSS verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!