Penapis CSS boleh mencapai pelbagai kesan visual. 1. Gunakan skala kelabu () untuk menukar gambar ke dalam rajah skala kelabu, yang sering digunakan untuk penukaran keadaan interaktif; 2. Blur () menyedari Gaussian Blur, sesuai untuk latar belakang kabur dan senario lain; 3. Laraskan kecerahan, kontras dan ketepuan melalui kecerahan (), kontras (), dan tepu () masing -masing, dan gunakannya dalam kombinasi untuk menghasilkan nada yang pelbagai; 4. Pelbagai penapis boleh digunakan dengan memanfaatkan ruang, tetapi perhatian harus dibayar kepada impak pesanan dan prestasi. Penapis ini mudah dan cekap, sesuai untuk meningkatkan ekspresi halaman.

Penapis CSS adalah alat yang sangat praktikal yang dapat merealisasikan beberapa kesan visual pada laman web, seperti kabur, pelarasan kontras, paparan skala kelabu, dan lain -lain. Mereka bukan sahaja mudah dan mudah digunakan, tetapi juga mempunyai keserasian yang baik, menjadikannya sesuai untuk pemprosesan imej atau kesan khas halaman.

Berikut adalah kesan dan penggunaan yang lebih biasa digunakan dalam pembangunan sebenar:

Gaya kelabu atau hitam dan putih

Kadang -kadang untuk menyatukan gaya visual, atau menyerlahkan keadaan tertentu (seperti keadaan kurang upaya), imej perlu diubah menjadi nada kelabu. Pada masa ini, anda boleh menggunakan penapis grayscale() .

 img {
  Penapis: Grayscale (100%);
}

• Parameter adalah peratusan, 100% bermakna kelabu lengkap, 0% bermaksud imej asal.
• Kaedah ini sering digunakan untuk kesan penukaran hover tetikus, seperti:

 IMG: Hover {
  Penapis: Grayscale (0%);
}

Dengan cara ini, gambar itu dipulihkan kepada warna apabila pengguna bergerak, yang mempunyai interaksi, dan tidak perlu menyediakan dua gambar.

Gaussian kabur

Kesan Blur juga merupakan keperluan biasa, seperti latar belakang pop-up, Pratonton Gambar Blur, dll.

 .blur-kesan {
  Penapis: Blur (5px);
}

• Parameter adalah nilai piksel, dan semakin besar bilangannya, kaburnya menjadi.
• NOTA: Terlalu besar kabur akan menjejaskan prestasi, terutamanya apabila menggunakan kabur dinamik untuk imej besar.
• Pendekatan yang sama adalah menggunakan kabur dalam animasi peralihan, seperti menambah titik kabur sebelum pudar, untuk menjadikan visual lebih semula jadi.

Laraskan kecerahan, kontras, ketepuan

Penapis ini boleh digunakan secara bersendirian atau digabungkan untuk menyesuaikan nada keseluruhan imej:

 img {
  Penapis: Kecerahan (80%) Sebaliknya (120%) tepu (150%);
}

• brightness() mengawal kecerahan, 100% adalah kecerahan asal, kurang daripada 100% dimming.
• contrast() mengawal kontras, 100% tidak berubah, semakin tinggi nilai, semakin kuat kontras.
• saturate() mengawal ketepuan warna, 100% adalah imej asal, semakin tinggi nilai, warna yang lebih cerah.

Parameter ini boleh dipadankan dengan fleksibel mengikut keperluan reka bentuk, seperti memaparkan gambar dalam "Mod Malam" untuk mengurangkan kecerahan dan kontras dengan sewajarnya.

Pelbagai penapis ditumpukan

CSS membolehkan anda menulis pelbagai fungsi penapis dalam harta penapis, hanya memisahkannya dengan ruang:

 .filter-combo {
  Penapis: Kecerahan (90%) Sepia (30%) Blur (2px);
}

Terdapat keperluan untuk memberi perhatian kepada isu pesanan: walaupun pesanan tidak menjejaskan hasil akhir dalam kebanyakan kes, mungkin ada interaksi antara penapis tertentu. Adalah disyorkan untuk mengaturnya dalam susunan logik, seperti pemprosesan warna terlebih dahulu dan kemudian kabur.

Di samping itu, menggunakan pelbagai penapis akan meningkatkan beban rendering, terutamanya apabila digunakan dalam banyak unsur atau kesan animasi, ingat untuk menguji prestasi.

Secara umum, penapis CSS adalah kaedah peningkatan visual yang ringan dan berkesan yang boleh membuat perubahan visual yang baik tanpa bergantung pada sumber tambahan. Menguasai beberapa fungsi yang biasa digunakan dan menggabungkan sedikit peralihan atau interaksi dapat meningkatkan ekspresi banyak halaman.

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