Bagaimanakah saya boleh mencapai kesan kabur Aero Glass Vista/Windows 7 untuk pop timbul dinamik menggunakan CSS, mengekalkan keserasian merentas pelayar?

Kaburkan Latar Belakang dengan CSS tanpa Menjejaskan Kandungan

Soalan:

Untuk pop timbul dinamik pada tapak web, anda mahukan kesan kabur latar belakang serupa dengan Aero Glass Vista/Windows 7. Bagaimanakah anda boleh mencapai ini dalam CSS sambil mengekalkan keserasian dengan penyemak imbas moden?

Jawapan:

Kemas kini (Oktober 2016):

Teknik yang dipertingkatkan memanfaatkan unsur pseudo dan penapis kabur SVG. Lihat demo di bawah:

[Demo: Menggunakan Elemen Pseudo untuk Kabur Latar Belakang](pautan demo)

Pendekatan ini berfungsi merentas pelayar, kecuali IE, yang tidak menyokong kabur melalui sama ada penapis CSS atau SVG.

Jawapan Asal (sebelum Oktober 2016):

Menggunakan -moz-element() dan SVG Blur Filter:

1. Gunakan sifat -moz-element() untuk menentukan elemen sebagai imej latar belakang untuk elemen lain.
2. Gunakan penapis kabur SVG pada imej latar belakang.
3. Secara pilihan, gunakan jQuery untuk menatal jika latar belakang diposisikan tetap.

Lihat demo di sini:

[Demo: Menggunakan -moz- element() for Background Blur](demo-link)

Limitation:

Kaedah ini terhad kepada Firefox kerana penggunaan -moz-element(), yang hanya disokong oleh Mozilla pada masa ini. Walau bagaimanapun, terdapat usaha untuk melaksanakannya dalam penyemak imbas Webkit, jadi sokongan masa hadapan diharapkan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencapai kesan kabur Aero Glass Vista/Windows 7 untuk pop timbul dinamik menggunakan CSS, mengekalkan keserasian merentas pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!