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

Hintergrundbilder mit CSS ausschneiden. Hintergrundgröße: Cover und Hintergrundanhang: behoben.

Beim Problem mit ausgeschnittenen Hintergrundbildern mithilfe von CSS Hintergrundgröße: Cover und Hintergrundanhang: behoben, es ist wichtig, die Mechanismen hinter diesen Eigenschaften zu verstehen.

Hintergrundgröße: cover skaliert das Bild so, dass es das gesamte Element ausfüllt, während background-attachment: Fixed das Hintergrundbild im Ansichtsfenster verankert. Dies bedeutet, dass das Bild an seinem Platz bleibt, wenn das Element scrollt.

Diese Kombination führt jedoch zu einem Abschneiden, wenn das Element kleiner als das Ansichtsfenster ist. Dies liegt daran, dass „background-size: cover“ die Bildgröße relativ zum Ansichtsfenster und nicht zum Element berechnet.

Um dieses Problem zu beheben, ist CSS allein nicht ausreichend, da es sich hierbei um eine feste Designeinschränkung handelt Hintergrundanhang. Um die Position und Größe der Bilder innerhalb des Elements beizubehalten, ist JavaScript erforderlich.

Im Einzelnen müssen Sie:

1. Hintergrund entfernen- Anhang: behoben: Dadurch wird das Hintergrundbild so geändert, dass es sich innerhalb der Seite normal verhält Flow.
2. Verwenden Sie JavaScript, um auf Fenster-Scroll-Ereignisse zu warten: Dadurch können Sie die Eigenschaft „Hintergrundposition“ dynamisch anpassen.
3. Berechnen Sie die neue Hintergrundposition : Bestimmen Sie den Versatz des Elements vom Ansichtsfenster und wenden Sie die entsprechende Anpassung auf die Hintergrundposition an Eigenschaft.

Durch die Implementierung dieser Lösung in JavaScript können Sie einen festen Hintergrundeffekt simulieren und gleichzeitig das gewünschte Verhalten innerhalb des Elements beibehalten.

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