Bagaimana untuk Mencipta Kesan Kabur Tirai Latar dengan CSS, Walaupun dalam Pelayar Lama?

CSS: Polifill Tirai Latar Belakang

penapis Tirai Latar, ciri CSS yang membolehkan kabur dan kesan lain pada latar belakang elemen, kekal sebahagian besarnya tidak disokong dalam penyemak imbas moden. Sebagai alternatif, pertimbangkan untuk menggunakan latar belakang yang sedikit lutsinar sebagai sandaran:

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

@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 menyediakan sandaran telus untuk penyemak imbas yang tidak mempunyai sokongan penapis tirai latar, sambil mendayakan kesan kabur dalam penyemak imbas yang disokong. CSS juga membenarkan semakan CSS masa hadapan yang mungkin memperkenalkan sokongan penapis tirai latar yang tidak ditetapkan.

Visualisasi:

[Imej sandaran telus tanpa sokongan penapis latar belakang] [Imej kesan kabur dengan sokongan penapis latar]

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Kabur Tirai Latar dengan CSS, Walaupun dalam Pelayar Lama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!