Bagaimanakah Saya Boleh Mencipta Tindanan Separa Lutsinar Kabur Menggunakan CSS?

Memohon Kesan Kaca/Kabur CSS pada Tindanan

Isu:

Mencipta div tindanan separa telus dengan latar belakang kabur untuk mengaburkan elemen di belakangnya. Walau bagaimanapun, kod CSS semasa (dengan kesan penapis) gagal menghasilkan hasil yang diingini.

CSS:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

Penyelesaian:

Untuk mencapai kesan yang diingini, pertimbangkan untuk menggunakan sifat CSS penapis latar belakang. Kaedah ini lebih mudah dan menyediakan sokongan merentas penyemak imbas yang lebih baik:

#overlay {
    backdrop-filter: blur(6px);
}

Nota: Sokongan penyemak imbas untuk penapis tirai latar tidak universal, tetapi ia harus berfungsi dalam kebanyakan penyemak imbas moden. Dalam kes di mana pengaburan tidak penting, alternatif ini boleh memberikan penyelesaian yang boleh dipercayai.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Tindanan Separa Lutsinar Kabur Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!