Verursachen „background-size: cover' und „background-attachment: Fixed' das Abschneiden des Hintergrundbilds, und wie kann das Problem gelöst werden?

CSS-Hintergrundgröße: Hintergrundanhang abdecken: Behobenes Ausschneiden von Hintergrundbildern

Kann es vorkommen, dass Hintergrundbilder die gleiche Hintergrundgröße haben? : Cover und Hintergrundanhang: Behoben, dass sie abgeschnitten werden?

Die Problem:
Wie die Frage andeutet, führt in einem Szenario mit Figuren, die Hintergrundbilder verwenden, die Kombination aus „background-size: cover“ und „background-attachment: Fixed“ dazu, dass die Hintergrundbilder abgeschnitten werden, wenn ein Versatz vorliegt. Dies ist ein inhärentes Verhalten von CSS, wie von Mozilla dokumentiert.

Das Ziel:
Das gewünschte Ergebnis besteht darin, dass Bilder entweder vertikal oder horizontal, aber nicht beides, unter Beibehaltung abgeschnitten werden zentrierte Ausrichtung innerhalb der Figur selbst.

Die Lösung:
Leider ist dieses Ergebnis allein mit CSS nicht zu erreichen möglich. Wie in der Antwort ausführlich beschrieben, führt die feste Positionierung in CSS zu einer Trennung zwischen dem Hintergrundbild und dem Containerelement. Daher wird auch beim Cover-Wert die Bildgröße relativ zum Ansichtsfenster und nicht anhand der Abmessungen der Figur bestimmt.

JavaScript-Alternative:
Die empfohlene Lösung ist die Verwendung von JavaScript zur Simulation der feste Positionierungseffekt bei der Berechnung der Hintergrundgröße: Abdeckung relativ zum Figurenelement. Dazu gehört das Abhören von Bildlaufereignissen und das manuelle Anpassen der Hintergrundposition an den Bildlauf im Ansichtsfenster.

Das obige ist der detaillierte Inhalt vonVerursachen „background-size: cover' und „background-attachment: Fixed' das Abschneiden des Hintergrundbilds, und wie kann das Problem gelöst werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!