Wie erreicht man den verschwommenen Overlay-Effekt von iOS 7 mit CSS?

Erzielen des unscharfen Overlay-Effekts von iOS 7 mit CSS

Apples iOS 7 führte einen deutlichen unscharfen Overlay-Effekt ein, der über die bloße Transparenz hinausgeht. Entwickler fragen sich oft, wie sie diese ansprechende visuelle Verbesserung mithilfe von Webtechnologien reproduzieren können.

CSS-Lösung

CSS 3 bietet eine unkomplizierte Methode, um diesen Effekt zu erzielen:

<code class="css">#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}</code>

Durch Hinzufügen dieses CSS-Codes zu einem Element können Sie den unscharfen Overlay-Effekt anwenden. Der Filter „blur()“ legt die Menge der angewendeten Unschärfe fest, während „Opacity“ die Transparenz des Elements steuert.

Praktisches Beispiel

Hier ist ein JSFiddle-Beispiel demonstriert diese Technik: https://jsfiddle.net/nwq9t/.

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