Bagaimana untuk Mengaburkan Imej Latar Belakang dalam CSS Tanpa Mengaburkan Kandungan?

Kabur CSS pada Imej Latar Belakang Sambil Mengekalkan Kejelasan Kandungan

Dalam percubaan untuk mengaburkan imej latar belakang dalam tetapan CSS, adalah perkara biasa untuk dihadapi isu di mana kandungan (teks atau elemen lain) juga menjadi kabur. Di sinilah konsep indeks-z dan elemen pseudo dimainkan.

Untuk mengaburkan imej latar belakang tanpa menjejaskan kandungan, pendekatan berikut boleh digunakan:

1. Mencipta Bekas untuk Latar Belakang: Lampirkan imej latar belakang dalam div atau bekas lain dan tetapkan padanya kelas, seperti "blur-bgimage."
2. Memperkenalkan Elemen Pseudo: Dalam kelas "blur-bgimage", tambahkan kelas pseudo seperti :sebelum ini. Ini mewujudkan lapisan di belakang bekas yang mewarisi imej latar belakang.
3. Mengaburkan Latar Belakang: Gunakan kesan kabur pada elemen pseudo menggunakan penapis CSS. Ini akan mengaburkan imej latar belakang yang diwarisi tanpa menjejaskan kandungan.
4. Tindikan Kandungan: Letakkan kandungan dalam bekas "blur-bgimage", memastikan ia mempunyai indeks-z yang lebih tinggi (cth. , z-index: 1) daripada latar belakang kabur (z-index: 0).

Di bawah ialah contoh kod:

<code class="css">.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter: blur(10px);
    -moz-filter: blur(10px);
    -webkit-filter: blur(10px);
    -o-filter: blur(10px);

    transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
}</code>

Dengan melaksanakan pendekatan ini, anda boleh mengaburkan imej latar belakang dengan berkesan sambil mengekalkan kejelasan kandungan anda, membolehkan reka bentuk tapak web yang menarik secara visual.

Atas ialah kandungan terperinci Bagaimana untuk Mengaburkan Imej Latar Belakang dalam CSS Tanpa Mengaburkan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!