Bagaimana untuk Meniru Penapis Tirai Latar CSS dalam Penyemak Imbas Tanpa Sokongan Asli?

Penyelesaian untuk Penapis Tirai Latar CSS

Walaupun dijanjikan, penapis tirai latar CSS kekal sebagai ciri yang sukar difahami dalam penyemak imbas moden. Dengan Chrome 51 menawarkan sokongan terhad melalui bendera Platform Web Eksperimennya dan Safari 9.1 yang memerlukan penggunaan awalan -webkit-, kepraktisannya masih dipersoalkan. Nasib baik, terdapat penyelesaian yang boleh meniru kesan yang diingini jika tiada sokongan penapis latar belakang asli.

Satu pendekatan yang menjanjikan melibatkan penggunaan latar belakang yang sedikit telus sebagai sandaran. Apabila penapis tirai latar tidak tersedia, latar belakang lutsinar ini menyediakan penyelesaian yang bijak dan boleh dicampur.

Walau bagaimanapun, untuk penyemak imbas yang menyokong penapis tirai latar, kod boleh meningkatkan kesan dengan mengurangkan lagi ketelusan latar belakang dan menggunakan penapis kabur. Gabungan ini secara berkesan meniru gelagat penapis latar belakang.

Untuk melaksanakan penyelesaian ini, hanya gunakan kod berikut:

<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>

Penyelesaian ini menyediakan keserasian merentas penyemak imbas, menawarkan pengalaman visual yang konsisten tanpa mengira sokongan penyemak imbas untuk penapis latar belakang. Ia juga termasuk contoh untuk menunjukkan kesan sandaran dan kesan yang dipertingkatkan dengan sokongan penapis latar belakang.

Atas ialah kandungan terperinci Bagaimana untuk Meniru Penapis Tirai Latar CSS dalam Penyemak Imbas Tanpa Sokongan Asli?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!