Bagaimana untuk Mengaburkan Imej Latar Belakang Tanpa Menjejaskan Kejelasan Kandungan?

Mengkaburkan Imej Latar Belakang tanpa Menjejaskan Kandungan

Dalam percubaan untuk mencipta reka bentuk yang menarik secara visual, pembangun sering menghadapi cabaran apabila mengaburkan imej latar belakang daripada halaman web. Walau bagaimanapun, pengaburan imej sering menjejaskan kandungan utama (teks dan elemen) juga. Ini menimbulkan persoalan: bagaimanakah kita boleh mengaburkan imej latar belakang tanpa mengorbankan kejelasan kandungan kita?

Penyelesaian terletak pada penggunaan CSS dan JavaScript untuk mencipta lapisan berasingan untuk latar belakang yang kabur sambil mengekalkan lapisan kandungan yang berbeza. Berikut ialah coretan kod lengkap:

.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;
}

Coretan kod ini mencipta elemen pseudo (:sebelum) yang mewarisi imej latar belakang. Dengan meletakkan elemen pseudo ini secara mutlak, kami mencipta lapisan berasingan untuk latar belakang kabur. Kesan kabur digunakan menggunakan sifat penapis.

Untuk mengaburkan latar belakang, cuma tambah kelas "blur-bgimage" pada elemen yang dikehendaki. Untuk mengalih keluar kabur, alih keluar kelas. JavaScript boleh digunakan untuk menambah dan mengalih keluar kelas secara dinamik, membenarkan kawalan dinamik bagi kesan kabur.

Dengan melaksanakan teknik ini, anda boleh mencipta reka bentuk visual yang menakjubkan dengan imej latar belakang kabur sambil mengekalkan kejelasan kandungan tapak web anda .

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!