Bagaimanakah Saya Boleh Mencapai Kesan `penapis latar belakang` dalam Penyemak Imbas Yang Tidak Menyokongnya?

CSS: Menyediakan Alternatif untuk Penapis tirai latar Tidak Tersedia

Ciri penapis tirai latar dalam CSS kekal tidak boleh diakses dalam kebanyakan penyemak imbas kontemporari. Walaupun kami menjangkakan sokongan masa depannya, mencari penyelesaian alternatif menjadi penting.

Satu kaedah untuk mencapai kesan yang serupa ialah dengan menggunakan latar belakang dengan ketelusan yang halus. Kod CSS di bawah menunjukkan pendekatan ini:

<code class="css">/* Slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* Blurred effect with backdrop support */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}</code>

Apabila penapis latar belakang tidak disokong, latar belakang yang sedikit lutsinar akan berfungsi sebagai sandaran. Penyemak imbas yang menyokong penapis tirai latar akan memaparkan kesan kabur.

Sampel yang menggambarkan kesan tanpa dan dengan sokongan penapis tirai latar disediakan di bawah:

[Imej sandaran lutsinar]
[ Imej kabur]

Dengan menggunakan strategi ini, anda boleh menggabungkan penapis yang menarik secara visual pada elemen walaupun dalam penyemak imbas yang tidak mempunyai keupayaan penapis latar belakang asli.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Kesan `penapis latar belakang` dalam Penyemak Imbas Yang Tidak Menyokongnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!