Heim  >  Artikel  >  Web-Frontend  >  Wie repliziere ich den Unschärfeeffekt von iOS 7 mithilfe von CSS?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-01 02:35:27566Durchsuche

How to Replicate iOS 7's Blur Effect Using 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!

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