Bagaimana untuk Mengaburkan Imej Latar Belakang Tanpa Menjejaskan Kejelasan Kandungan?

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:

1. Balut kandungan dalam kelas tertentu (cth., "blur-bgimage"):

<code class="html"><div class="blur-bgimage">
  <span>Main Content</span>
</div></code>

2. Gayakan : sebelum elemen pseudo dalam kelas untuk meniru imej latar belakang dan menggunakan kesan kabur:

<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>

3. Elemen :before pseudo menindih kandungan, mewarisi imej latar belakang dan menggunakan kesan kabur . Indeks z negatif meletakkannya di belakang kandungan.
4. Menambah kelas blur-bgimej pada bekas induk mencetuskan kesan kabur, sambil mengalih keluarnya memulihkan kejelasan asal.

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!