Mencipta Kabur Imej Latar Belakang Tanpa Menjejaskan Kandungan
Dalam contoh ini, matlamatnya adalah untuk mengaburkan imej latar belakang tanpa menjejaskan kejelasan kandungan (dalam kes ini, elemen span).
Isu
Apabila menggunakan kesan kabur pada imej latar belakang menggunakan CSS, kandungan dalam elemen juga menjadi kabur . Ini menimbulkan cabaran dalam mengekalkan kebolehbacaan teks atau kandungan lain.
Penyelesaian
Untuk mencapai kesan yang diingini, kelas pseudo CSS boleh digunakan. Kelas pseudo :before sesuai untuk senario ini. Begini cara untuk melakukannya:
<code class="html"><div class="blur-bgimage"> <span>Main Content</span> </div></code>
<code class="css">.blur-bgimage:before { content: ""; position: absolute; width: 100%; height: 100%; background-image: inherit; z-index: -1; filter: blur(10px); // Adjust the blur radius as desired transition: all 2s linear; }</code>
Ini kaedah mengaburkan imej latar belakang dengan berkesan sambil mengekalkan ketajaman kandungan dalam elemen.
Atas ialah kandungan terperinci Bagaimana untuk Mengaburkan Imej Latar Belakang Tanpa Menjejaskan Kejelasan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!