Heim >Web-Frontend >CSS-Tutorial >Warum sind meine festen Hintergrundbilder in iOS7 unscharf und wie kann ich das beheben?
Probleme mit Hintergrundbildern in iOS7 beheben
Bei der Verwendung fester Hintergrundbilder in iOS7 können Schwierigkeiten auftreten. Dieses Problem tritt auf, wenn das Hintergrundbild vergrößert und unscharf erscheint, insbesondere auf iPads. Um dieses Problem zu beheben, muss der verwendete CSS-Code untersucht werden.
Das vom Benutzer bereitgestellte Code-Snippet enthält die folgenden CSS-Deklarationen:
.header { display: table; height: 100%; width: 100%; position: relative; color: #fff; background: url(../images/boston2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Die problematische Kombination ist die Verwendung von Hintergrund -Anhang: behoben mit Hintergrundgröße: Cover. Diese Kopplung führt zu Kompatibilitätsproblemen mit vielen mobilen Browsern, einschließlich iOS7.
Lösung 1: Hintergrundanhang: Scrollen
Eine Möglichkeit besteht darin, Hintergrundanhang: behoben durch zu ersetzen Hintergrundanhang: scrollen. Damit wird zwar nicht der gewünschte „feste“ Effekt erzielt, aber zumindest die Bilder werden sichtbar sein.
Lösung 2: Hintergrundposition: Scrollen mit JavaScript
Alternativ , kann man „background-position:scroll“ verwenden und JavaScript implementieren, um die Position des Bildes oben im Ansichtsfenster beizubehalten. Dieser Ansatz erfordert eine etwas fortgeschrittenere Codierung, bietet aber eine optisch ansprechendere Lösung.
Das obige ist der detaillierte Inhalt vonWarum sind meine festen Hintergrundbilder in iOS7 unscharf und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!