Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich den verschwommenen Overlay-Effekt von iOS 7 mit CSS wiederherstellen?

Wie kann ich den verschwommenen Overlay-Effekt von iOS 7 mit CSS wiederherstellen?

Susan Sarandon
Susan SarandonOriginal
2024-10-30 02:06:28687Durchsuche

How to Recreate iOS 7's Blurry Overlay Effect with CSS?

Nachbildung des verschwommenen Overlay-Effekts von iOS 7 mit CSS

iOS 7 führte einen deutlichen verschwommenen Overlay-Effekt ein, der bestimmten Elementen Tiefe und visuelles Interesse verleiht. Dieser Effekt wird durch die Kombination von Transparenz mit einem Unschärfefilter erreicht. Während es ursprünglich nur auf der Apple-Plattform verfügbar war, kann es jetzt mit CSS und optional JavaScript repliziert werden.

Der Effekt: Mehr als nur Transparenz

Der iOS-Unschärfeeffekt geht über die einfache Transparenz hinaus, die er erzeugt eine subtile Unschärfe, die den darunter liegenden Inhalt weicher macht. Dieser Effekt macht sich besonders bei den Lautstärke- und Helligkeitsüberlagerungen bemerkbar, die im iOS Control Center angezeigt werden.

CSS-Lösung

Glücklicherweise unterstützt modernes CSS die Eigenschaft filter, die Folgendes enthält: blur()-Funktion, um den gewünschten Effekt zu erzielen. Der folgende Code zeigt, wie der Unschärfeeffekt mithilfe von CSS erstellt wird:

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

Dieser Code wendet einen 20-Pixel-Unschärfefilter auf das angegebene Element an und reduziert seine Deckkraft auf 40 %. Der Unschärfefilter ist browserspezifisch, daher werden mehrere Herstellerpräfixe verwendet, um die browserübergreifende Kompatibilität sicherzustellen.

Live-Beispiel

Um den Effekt in Aktion zu sehen, schauen Sie sich diese JSFiddle-Demo an: [JSFiddle Demo](https://jsfiddle.net/e5m5efrw/embedded/)

Das obige ist der detaillierte Inhalt vonWie kann ich den verschwommenen Overlay-Effekt von iOS 7 mit CSS wiederherstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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