Bagaimana untuk Mencapai Kesan Kaca Kabur Tanpa Bergantung pada `penapis latar belakang`?

Alternatif Kabur kepada Penapis Tirai Latar Belakang CSS

Walaupun kesannya menawan, penapis tirai latar CSS tetap sukar difahami, dengan sokongan penyemak imbas terhad mulai 1 Julai 2016. Sementara kami tidak sabar-sabar menunggu pelaksanaan penuhnya, mari kita terokai penyelesaian yang boleh membawa kita lebih dekat kepada kesan kaca kabur yang diingini.

Kemunduran Telus

Untuk penyemak imbas yang tidak mempunyai sokongan penapis latar belakang, sedikit latar belakang lutsinar boleh meniru kesan kaca beku. Kod berikut memberikan sandaran mudah:

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

Memanfaatkan Sokongan Penyemak Imbas

Untuk penyemak imbas yang menyokong penapis tirai latar, kami boleh memanfaatkan keupayaan pengaburannya. Berikut ialah versi tambahan bagi kod CSS yang memenuhi senario ini:

<code class="css">/* 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>

Kod ini memastikan bahawa kesan kabur digunakan dalam penyemak imbas yang disokong, manakala sandaran lutsinar merosot dengan anggun bagi mereka yang tidak.

Contoh: Melihat Kabur dalam Tindakan

Tanpa sokongan penapis latar belakang, elemen dipaparkan dengan latar belakang telus sedikit, seperti yang digambarkan oleh imej berikut:

[Sisipkan imej bagi kesan sandaran lutsinar]

Dengan sokongan penapis latar belakang, kesan kaca kabur bertahan, seperti yang dipamerkan dalam imej berikut:

[Sisipkan imej kesan kabur]

Kesimpulan

Penyelesaian penapis latar belakang yang dibentangkan di sini menyediakan penyelesaian praktikal untuk mencapai kesan kaca kabur pada elemen web, tanpa mengira sokongan penyemak imbas. Walaupun kami menjangkakan ketersediaan penuh penapis tirai latar pada masa hadapan, teknik ini menawarkan alternatif yang berharga untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Kesan Kaca Kabur Tanpa Bergantung pada `penapis latar belakang`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!