Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mengaburkan Imej Latar Belakang Tanpa Menjejaskan Kejelasan Kandungan?

Bagaimana untuk Mengaburkan Imej Latar Belakang Tanpa Menjejaskan Kejelasan Kandungan?

Linda Hamilton
Lepaskan: 2024-10-31 07:39:01
asal
534 orang telah melayarinya

How to Blur a Background Image Without Affecting Content Clarity?

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>
Salin selepas log masuk
  1. 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>
Salin selepas log masuk
  1. Elemen :before pseudo menindih kandungan, mewarisi imej latar belakang dan menggunakan kesan kabur . Indeks z negatif meletakkannya di belakang kandungan.
  2. 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!

sumber:php.cn
Artikel sebelumnya:Bagaimana untuk Menyembunyikan Anak Panah Turun dalam Elemen