Bagaimana untuk Meniru Kesan Kabur iOS 7 Menggunakan CSS?

Kesan Kabur iOS 7 dengan CSS: Pandangan Lebih Dekat

IOS 7 Apple memperkenalkan kesan tindanan kabur yang menarik secara visual. Walaupun ia kelihatan seperti perkara mudah ketelusan, kesan ini melibatkan lebih daripada apa yang dilihat.

Soalan: Bagaimanakah kita boleh meniru kesan ini menggunakan CSS dan, jika perlu, JavaScript?

Jawapan:

CSS 3 menawarkan penyelesaian untuk mencapai kesan ini:

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

Penapis blur() menambah kesan kabur pada elemen, manakala sifat kelegapan mengawal ketelusan. Untuk memperhalusi kesan, percubaan dengan nilai yang berbeza untuk blur() dan kelegapan.

Contoh:

Terokai contoh langsung kod ini dalam tindakan di JSFiddle.

Atas ialah kandungan terperinci Bagaimana untuk Meniru Kesan Kabur iOS 7 Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!