Heim > Web-Frontend > CSS-Tutorial > 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
Freigeben: 2024-11-01 02:35:27
Original
684 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage