Wie simuliere ich CSS „background-attachment: behoben' unter iOS?

So replizieren Sie feste Hintergrundanhänge auf iOS

Trotz der CSS-Eigenschaft „background-attachment: Fixed“ bleibt die Aktivierung fester Hintergrundbilder auf iOS-Geräten bestehen eine Herausforderung. Die Standardmethode führt zu einer unregelmäßigen Größe und dem Fehlen von Scrolleffekten.

Eine erfolgreiche Implementierung finden Sie unter everydeservesgreatdesign.com. Allerdings verschleiert ihre Squarespace-Vorlage den zugrunde liegenden Code. Die Analyse legt nahe, dass sie Bilder in ein position:fixed-Div einbetten, das durch ein position:relative parent-Div beschnitten wird.

Entgegen den Erwartungen können position:fixed-Divs durch ihr position:relative parent-Div beschnitten werden. Dieses Verhalten, das nur bei iOS auftritt, bietet eine mögliche Problemumgehung.

So erreichen Sie einen festen Hintergrund unter iOS:

1. Erstellen Sie eine position:fixed Div:Fügen Sie eine ein div mit absoluter Positionierung und einem festen Hintergrund im DOM.
2. Div ausschneiden: Verwenden Sie CSS zum Ausschneiden das feste Div unter Verwendung seiner Position:relatives übergeordnetes Div. Dadurch wird verhindert, dass der Hintergrund über die Grenzen des übergeordneten Elements hinausragt.
3. Position und Größe des Div: Positionieren und skalieren Sie das feste Div sorgfältig, um sicherzustellen, dass es mit dem beabsichtigten Hintergrund übereinstimmt.

Obwohl es möglich ist, diese Methode zu implementieren, ist es wichtig zu beachten, dass feste Hintergründe die Leistung in mobilen Browsern erheblich beeinträchtigen. Erwägen Sie daher den Einsatz alternativer Lösungen oder den Verzicht auf feste Hintergründe ganz. Weitere Anleitungen zur Leistungsoptimierung für iOS-Geräte finden Sie in den vorgeschlagenen Problemumgehungen in den verlinkten Beiträgen.

Das obige ist der detaillierte Inhalt vonWie simuliere ich CSS „background-attachment: behoben' unter iOS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!