Bagaimana untuk Mencapai Kesan Kabur Kaca CSS pada Tindanan?

Memohon Kesan Kaca/Kabur CSS pada Tindanan

S: Melaksanakan kesan kabur pada tindanan separa lutsinar

Pemaju web menghadapi kesukaran untuk menggunakan kesan kabur pada div tindanan, menjadikan kandungan di belakang div muncul kabur.

Percubaan Sebelumnya:

Pemaju cuba melaksanakan kesan menggunakan CSS berikut:

#overlay {
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

Walau bagaimanapun, pendekatan ini tidak berjaya .

Disemak Penyelesaian:

Untuk penyelesaian yang lebih ringkas dan moden, pembangun boleh menggunakan sifat penapis latar belakang:

#overlay {
    backdrop-filter: blur(6px);
}

Sokongan Penyemak Imbas:

Perhatikan bahawa sokongan penyemak imbas untuk penapis latar belakang tidak menyeluruh. Walau bagaimanapun, untuk banyak kes penggunaan, kesan kabur tidak kritikal.

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