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

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!