Penapis Tirai Latar Tidak Tersedia: Bagaimana Mencapai Kesan Latar Belakang Kabur dalam Penyemak Imbas Moden?

Penyelesaian CSS: Penyelesaian Sementara untuk Penapis Tirai Latar yang Sukar

Walaupun merupakan ciri CSS yang menjanjikan, penapis tirai latar masih tidak dapat dicapai untuk pelayar moden. Sehingga hari ini, hanya Chrome 51 (dengan bendera Platform Web Eksperimen) dan Safari 9.1 (dengan awalan -webkit-) menawarkan sebarang tahap sokongan untuknya. Firefox 47, malangnya, ketinggalan dalam aspek ini.

Ketersediaan terhad ini menyebabkan pembangun berebut-rebut mencari penyelesaian alternatif untuk mencapai kesan visual yang diingini. Sehingga penapis tirai latar boleh diakses secara universal, satu penyelesaian yang semakin popular ialah menggunakan latar belakang yang sedikit lutsinar sebagai sandaran:

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

/* if backdrop support: very transparent and blurred */
@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>

Dalam penyemak imbas yang menyokong penapis tirai latar (Safari dan Chrome dengan ciri percubaan didayakan) , kod ini menghasilkan kesan latar belakang yang kabur dengan berkesan. Untuk penyemak imbas tanpa sokongan, ia berfungsi sebagai sandaran, memberikan latar belakang yang sedikit telus.

Memandangkan spesifikasi CSS untuk penapis latar belakang terus berkembang, penyelesaian ini mungkin memerlukan pelarasan pada masa hadapan. Walau bagaimanapun, buat masa ini, ia menawarkan cara kreatif untuk membawa pengalaman visual yang diingini kepada pengguna merentas platform penyemak imbas yang berbeza.

Atas ialah kandungan terperinci Penapis Tirai Latar Tidak Tersedia: Bagaimana Mencapai Kesan Latar Belakang Kabur dalam Penyemak Imbas Moden?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!