Heim > Web-Frontend > CSS-Tutorial > Wie behebe ich verschwommene Hintergrundbilder unter iOS 7?

Wie behebe ich verschwommene Hintergrundbilder unter iOS 7?

Susan Sarandon
Freigeben: 2024-12-11 16:18:11
Original
722 Leute haben es durchsucht

How to Fix Blurry Background Images on iOS 7?

Behobene Hintergrundbildprobleme in iOS 7

Die Implementierung eines festen Hintergrundbilds kann sich unter iOS 7 als problematisch erweisen, insbesondere auf dem iPad, was dazu führt ein vergrößertes und verschwommenes Bild. Um dieses Problem zu beheben, überprüfen Sie den folgenden CSS-Code:

.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;
}
Nach dem Login kopieren

Mögliche Lösungen:

  • Verwenden Sie „background-attachment: scroll“: Dadurch wird verhindert, dass das Bild repariert wird, aber es kann zumindest angezeigt werden klar.
  • Implementieren Sie eine Medienabfrage: Beschränken Sie das feste Hintergrundverhalten auf Geräte, die keine Tablets oder Telefone sind, indem Sie eine Medienabfrage wie:
@media screen and (max-device-width: 1024px) {
  .header {
    background-attachment: scroll;
  }
}
Nach dem Login kopieren
  • Verwenden Sie „background-position: scroll“ und JavaScript: Halten Sie das Bild oben im Fenster fixiert JavaScript.
Durch die Berücksichtigung dieser Lösungen können Sie effektiv ein festes Hintergrundbild unter iOS 7 anzeigen, ohne dass Probleme auftreten.

Das obige ist der detaillierte Inhalt vonWie behebe ich verschwommene Hintergrundbilder unter iOS 7?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage