Bagaimanakah anda boleh mengaburkan imej latar belakang dalam CSS tanpa menjejaskan kandungan latar depan?

Kabur Latar Belakang dengan CSS: Mengelakkan Kandungan Kabur

Latar belakang kabur boleh meningkatkan estetika tapak web dan menumpukan perhatian pada kandungan utama. Tetapi bagaimana jika kabur secara tidak sengaja menjejaskan kandungan itu sendiri?

Dalam contoh ini, percubaan dibuat untuk mengaburkan imej latar belakang sambil mengekalkan kejelasan teks latar depan dalam elemen span. Untuk mencapai matlamat ini, CSS boleh digunakan secara strategik.

Teknik utama melibatkan penggunaan kelas pseudo :before untuk mewarisi imej latar belakang. Elemen div baharu dengan kelas "blur-bgimage" diperkenalkan dan a :before kelas pseudo ditambah. Elemen pseudo ini mewarisi imej latar belakang menggunakan latar belakang: inherit property.

Seterusnya, elemen pseudo :before dikaburkan dengan berkesan menggunakan penapis CSS. Dengan menggabungkan penapis ini (kabur(10px) dalam kes ini), imej latar belakang diberikan kesan kabur yang diingini.

Div ".blur-bgimage" kemudiannya diberikan limpahan: tersembunyi untuk menyembunyikan kawasan kabur di luar sempadan div. Margin, penjajaran teks dan indeks-z juga ditetapkan dengan sewajarnya.

Untuk menogol kesan kabur, JavaScript boleh digunakan untuk menambah atau mengalih keluar kelas ".blur-bgimage", seperti yang ditunjukkan dalam contoh jsfiddle yang disediakan . Menggunakan kaedah ini, kesan kabur latar belakang boleh dikawal secara dinamik tanpa menjejaskan kejelasan kandungan.

Atas ialah kandungan terperinci Bagaimanakah anda boleh mengaburkan imej latar belakang dalam CSS tanpa menjejaskan kandungan latar depan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!