Untuk mencapai kesan kaca beku, menggunakan sifat penapis latar belakang CSS adalah cara yang paling langsung. 1. Tetapkan warna latar lutut ke elemen, seperti RGBA; 2. Tambah penapis latar belakang dan tetapkan nilai kabur untuk mencapai kabur; 3. Adalah disyorkan untuk menambah -Webkit-backdrop-filter untuk bersesuaian dengan Safari; 4. Pastikan bekas induk mempunyai kandungan atau latar belakang sebenar, jika tidak, kesan kabur tidak akan dapat dilihat. Nota termasuk: overhead prestasi adalah tinggi, terutamanya pada terminal mudah alih, berlebihan harus dielakkan; Versi lama IE tidak menyokong, Safari perlu diawali; Pelbagai penapis boleh digabungkan untuk meningkatkan kesan visual, seperti menggunakan pelarasan kabur dan ketepuan pada masa yang sama.

Untuk menambah kesan kabur dan telus yang serupa dengan kaca beku ke unsur-unsur, menggunakan backdrop-filter CSS adalah cara yang paling langsung. Harta ini membolehkan anda menggunakan kesan grafik ke kawasan di belakang unsur -unsur, seperti gaussian kabur, pelarasan warna, dan lain -lain. Senario aplikasi biasa adalah untuk mewujudkan gaya visual kaca frosted lut.

Apa itu penapis latar belakang?

backdrop-filter tidak sama dengan filter biasa. filter biasa bertindak pada elemen itu sendiri, sementara backdrop-filter bertindak pada kandungan di belakang elemen. Maksudnya, anda hanya dapat melihat kesan penapis apabila elemen itu lut atau mempunyai kawasan telus.

Sebagai contoh: Jika anda menambah backdrop-filter: blur(10px) ke Div Opaque Putih, anda tidak akan melihat apa-apa perubahan kerana kandungan di belakangnya disekat sepenuhnya. Tetapi jika anda menetapkan div ini menjadi lut (contohnya, background-color: rgba(255,255,255,0.5) ), anda dapat melihat bahawa kandungan di belakangnya kabur.

Bagaimana cara menulis kesan kaca frosted asas?

Untuk mencapai kesan kaca beku, langkah -langkah berikut biasanya diperlukan:

• Tetapkan latar belakang ke bekas ke warna lutut
• Tambahkan atribut backdrop-filter dan tetapkan nilai kabur
• Boleh serasi dengan -webkit-backdrop-filter
• Perhatikan bahawa ibu bapa mesti mempunyai kandungan atau latar belakang sebenar, jika tidak, kesannya tidak akan dapat dilihat.

Kod sampel adalah seperti berikut:

 .lass {
  latar belakang warna: RGBA (255, 255, 255, 0.3);
  latar belakang penapis: blur (10px);
  -WebKit-backdrop-filter: blur (10px); / * serasi dengan safari */
  Padding: 20px;
}

Struktur HTML kira -kira seperti ini:

 <div class = "latar belakang-imej">
  <div class = "Glass"> Ini adalah teks Kesan Kaca Frosted </div>
</div>

Pastikan lapisan .background-image mempunyai kandungan atau imej latar belakang, jika tidak, anda tidak akan melihat kesan kabur.

Soalan dan nota yang sering ditanya

Terdapat beberapa perangkap yang perlu diperhatikan semasa menggunakan backdrop-filter :

• Isu Prestasi : Operasi blur() agak memakan prestasi, terutamanya di sisi mudah alih, semakin besar nilai kabur, semakin jelasnya. Adalah disyorkan untuk tidak berlebihan, atau untuk mengawal julat kabur.
• Keserasian pelayar : Pelayar moden arus perdana menyokongnya, tetapi jangan memikirkannya seperti versi lama IE. Safari perlu menambah -webkit- awalan untuk memastikan sedikit insurans.
• Masalah Hierarki : Jika induk elemen tidak mempunyai kandungan atau latar belakang yang sebenarnya, backdrop-filter tidak mempunyai apa-apa untuk "menapis", dan secara semulajadi tidak ada kesan untuk dilihat.
• Penapis Gabungan : Anda boleh menambah pelbagai kesan pada masa yang sama, seperti pelarasan hue kabur:

 latar belakang: Blur (8px) tepu (1.5);

Ini membolehkan kabur sambil sedikit mengubah tekstur warna, menjadikannya lebih dekat dengan kaca frosted sebenar.

Pada dasarnya itu sahaja. Perkara ini tidak rumit, tetapi mudah untuk mengabaikan butiran, seperti ketelusan, sama ada kandungan induk wujud, dan kesan prestasi. Jika digunakan tepat, UI akan kelihatan lebih berlapis.

Atas ialah kandungan terperinci Memohon penapis latar belakang untuk kesan seperti kaca beku dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!