Filter latar belakang dapat meningkatkan hierarki laman web melalui kabur dan kesan lain, dan sesuai untuk tingkap pop-up, kad dan komponen lain. 1. Gunakan kabur untuk mencapai kesan kaca beku, seperti .modal {backdrop-filter: blur (10px); latar belakang warna: RGBA (255, 255, 255, 0.6); }, dan disyorkan untuk menambah awalan -webkit- untuk meningkatkan keserasian; 2. Menggabungkan pelbagai fungsi penapis seperti kecerahan, kontras, dan lain -lain boleh mencipta gaya visual yang lebih kaya, tetapi memberi perhatian kepada perintah yang mempengaruhi kesannya; 3. Perhatikan kesan penggunaan prestasi, keserasian pelayar dan struktur hierarki pada kesan paparan, dan mengamalkan penyelesaian penurunan untuk memastikan konsistensi pengalaman halaman.

Kadang-kadang apabila anda ingin membuat elemen web kelihatan lebih berlapis atau mempunyai sedikit tekstur kaca beku, backdrop-filter berguna. Ia bukan sahaja bertindak pada kandungannya sendiri seperti penapis biasa, tetapi boleh "merawat" latar belakang dan membuat kesan yang serupa dengan kaca beku, kabur, pelarasan kontras, dan lain-lain. Ia amat sesuai untuk tingkap pop-up, kad, dan bar navigasi, yang memerlukan pemisahan visual dari latar belakang.

1. Pelaksanaan mudah kesan kabur

Ini adalah salah satu kegunaan yang paling biasa untuk backdrop-filter . Sebagai contoh, jika anda ingin membuat tetingkap pop timbul lut tetapi tidak mahu latar belakang dikaburkan sepenuhnya, anda boleh menambah penapis kabur:

 .modal {
  latar belakang penapis: blur (10px);
  latar belakang warna: RGBA (255, 255, 255, 0.6);
}

Dengan cara ini, pengguna melihat gambar selepas latar belakang kabur, dan pada masa yang sama, mereka dapat melihat kandungan dalam tetingkap pop-up dengan jelas. Kesan ini berfungsi dengan baik dalam pelayar mudah alih atau moden, tetapi mungkin tidak disokong dalam beberapa pelayar yang lebih tua, jadi anda perlu memberi perhatian kepada keserasian.

Amalan biasa adalah untuk menambah awalan -webkit- untuk menyesuaikan diri dengan pelayar safari dan iOS:

 .modal {
  -WebKit-backdrop-filter: blur (10px);
  latar belakang penapis: blur (10px);
  latar belakang warna: RGBA (255, 255, 255, 0.6);
}

2. Gunakan pelbagai penapis dalam kombinasi untuk mencipta gaya visual yang lebih kaya

backdrop-filter bukan sahaja kabur, tetapi juga dapat menanam fungsi penapis berganda, seperti kecerahan, kontras, skala kelabu, dan lain-lain. Anda boleh menggabungkan secara bebas mengikut keperluan reka bentuk anda:

 .card {
  Backdrop-filter: Blur (5px) Kecerahan (90%) kontras (120%);
}

Kod di atas bermaksud: pertama kabur 5px, kemudian sedikit redup untuk meningkatkan kontras. Ini akan menjadikan kad kelihatan lebih bertekstur dan lebih mudah untuk "melompat" dari latar belakang.

Beberapa fungsi penapis yang biasa digunakan termasuk:

• blur(px) : tahap kabur
• brightness(%) : Kecerahan
• contrast(%) : kontras
• grayscale(%) : Grayscale
• saturate(%) : tepu

Perhatikan perintah apabila menggabungkan, pesanan yang berbeza akan menjejaskan kesan akhir. Sebagai contoh, kabur terlebih dahulu dan kemudian menyesuaikan kecerahan akan berbeza dari perasaan visual yang mencerahkan terlebih dahulu dan kemudian mengaburkannya.

3. Perhatikan masalah prestasi dan keserasian

Walaupun backdrop-filter sejuk, ia tidak maha kuasa. Sila perhatikan perkara berikut semasa menggunakannya:

• Penggunaan Prestasi Tinggi : Terutama apabila pelbagai kesan kabur digunakan, menatal halaman mungkin digagalkan, terutama pada peranti rendah.
• Keserasian penyemak imbas adalah terhad : Pada masa ini, pelayar arus perdana menyokongnya, tetapi barang -barang lama seperti IE tidak baik. Sekiranya projek memerlukan keserasian dengan pelayar lama, sebaiknya menyediakan gaya alternatif.
• Hierarki mempengaruhi kesan paparan : backdrop-filter diberikan berdasarkan kawasan di belakang elemen, jadi bekas induk tidak boleh overflow: hidden atau beberapa tetapan tanaman, jika tidak, kesan penapis tidak akan dapat dilihat.

Penyelesaian:

• Nilai kabur kawalan tidak boleh terlalu besar, umumnya 5 ~ 10px sudah cukup
• Gunakan hanya pada UI utama untuk mengelakkan penyalahgunaan besar-besaran
• Tambah -webkit- awalan untuk meningkatkan keserasian
• Sediakan penyelesaian penurunan untuk penyemak imbas yang tidak disokong, seperti latar belakang lutut tulen

Pada dasarnya itu sahaja. Menggunakan backdrop-filter secara rasional boleh menjadikan laman web anda lebih menarik dan tidak rumit untuk beroperasi. Kuncinya tidak lupa untuk mempertimbangkan prestasi dan keserasian.

Atas ialah kandungan terperinci Menggunakan penapis latar belakang CSS untuk kesan unik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!