Bagaimana untuk Mencipta Latar Belakang Dinamik, Vista/7 Gaya Kabur dalam CSS Tanpa Menjejaskan Kandungan?

Latar Belakang Kabur dengan CSS

Soalan:

Bagaimana anda boleh mencipta latar belakang kabur gaya Vista/7 yang dinamik kesan dalam CSS tanpa menjejaskan kandungan dalam elemen?

Jawapan:

Dikemas kini (Oktober 2016):

Menggunakan Penapis SVG dan Elemen Pseudo:

Pendekatan yang lebih mudah melibatkan penggunaan elemen pseudo yang digabungkan dengan penapis kabur SVG. Teknik ini mengelakkan kandungan kabur dan mempunyai sokongan penyemak imbas yang lebih luas, termasuk Firefox, Chrome dan Opera.

Penyelesaian Asal:

Menggunakan -moz-element( ) dengan Penapis SVG (Firefox Sahaja):

1. Gunakan sifat -moz-element() untuk menentukan elemen kabur sebagai imej latar belakang.
2. Gunakan kabur SVG tapis ke elemen latar belakang.
3. Secara pilihan, gunakan jQuery untuk mendayakan tatal jika latar belakang ditetapkan.

Walaupun penyelesaian ini terhad kepada Firefox, ia menawarkan pilihan yang berdaya maju untuk mencapai kesan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Latar Belakang Dinamik, Vista/7 Gaya Kabur dalam CSS Tanpa Menjejaskan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!