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 Penapis Kabur SVG:

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

Lihat demo di sini:

[Demo: Menggunakan -moz-element() untuk Latar Belakang Kabur](pautan demo)

Had:

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!