Wie repliziere ich den Unschärfeeffekt von iOS 7 mithilfe von CSS?

Unschärfeeffekt von iOS 7 mit CSS: Ein genauerer Blick

Apples iOS 7 hat einen optisch ansprechenden unscharfen Overlay-Effekt eingeführt. Auch wenn es wie eine einfache Frage der Transparenz erscheint, beinhaltet dieser Effekt mehr, als man auf den ersten Blick sieht.

Frage: Wie können wir diesen Effekt mit CSS und gegebenenfalls JavaScript nachbilden?

Antwort:

CSS 3 bietet eine Lösung, um dies zu erreichen Effekt:

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

Der Filter „blur()“ fügt dem Element einen Unschärfeeffekt hinzu, während die Eigenschaft „Opacity“ die Transparenz steuert. Um den Effekt zu verfeinern, experimentieren Sie mit verschiedenen Werten für Unschärfe() und Deckkraft.

Beispiel:

Entdecken Sie ein Live-Beispiel dieses Codes in Aktion bei JSFiddle.

Das obige ist der detaillierte Inhalt vonWie repliziere ich den Unschärfeeffekt von iOS 7 mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!