Bagaimana untuk Mencapai Kesan Tindanan Kabur iOS 7 dengan CSS?

Mencapai Kesan Tindanan Kabur iOS 7 dengan CSS

IOS 7 Apple memperkenalkan kesan tindanan kabur yang berbeza yang melangkaui ketelusan semata-mata. Pembangun sering tertanya-tanya bagaimana untuk meniru peningkatan visual yang menarik ini menggunakan teknologi web.

Penyelesaian CSS

CSS 3 menawarkan kaedah yang mudah 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>

Dengan menambahkan kod CSS ini pada elemen, anda boleh menggunakan kesan tindanan kabur. Penapis 'blur()' menetapkan jumlah kabur yang digunakan, manakala 'opacity' mengawal ketelusan elemen.

Contoh Praktikal

Berikut ialah contoh JSFiddle yang menunjukkan teknik ini: https://jsfiddle.net/nwq9t/.

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