Bagaimana untuk Mencapai Kesan Latar Belakang Kabur pada Tindanan CSS Tanpa Mengaburkan Tindanan Itu Sendiri?

Mencapai Kesan Kaca dalam Tindanan CSS: Menyelesaikan Isu Kabur

Masalah: Menggunakan kesan kabur pada div tindanan terbukti mencabar, meninggalkan kandungan di sebalik tindanan tidak kabur. Mencari penyelesaian yang mudah dan merentas penyemak imbas.

Penyelesaian:

Contoh yang disediakan dalam jsfiddle mempamerkan isu biasa dengan kesan kabur dalam tindanan CSS: ia mengaburkan tindanan sendiri dan bukannya latar belakangnya. Untuk membetulkan perkara ini, pertimbangkan untuk memanfaatkan sifat penapis latar belakang.

CSS yang dikemas kini:

#overlay {
    ... (previous CSS) ...

    backdrop-filter: blur(6px);
}

Kelebihan:

• Lagi tepat: Mengaburkan tirai latar dan bukannya tindanan, mencapai kesan yang diingini.
• Keserasian merentas penyemak imbas: Disokong dalam penyemak imbas utama, termasuk Chrome, Firefox dan Edge.
• Kod ringkas: Mengeluarkan keperluan untuk berbilang sifat penapis, menyediakan pembersih dan penyelesaian yang lebih boleh diselenggara.

Nota:

Sokongan penyemak imbas untuk penapis tirai latar mungkin tidak sempurna, terutamanya dalam versi lama. Walau bagaimanapun, ia menawarkan peningkatan yang ketara berbanding penapis CSS yang dilaksanakan sebelum ini dan secara amnya mencukupi untuk kebanyakan kes penggunaan yang kesan kabur tidak penting.

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