Penapis CSS: Panduan Komprehensif untuk Manipulasi Imej

Contoh kesan penapis CSS.

Penapis CSS, pada mulanya sebahagian daripada spesifikasi SVG, menawarkan cara yang kuat dan mesra pengguna untuk memanipulasi rendering imej. Penapis ini, kini diintegrasikan ke dalam CSS, membolehkan kabur, mencerahkan, pelarasan ketepuan, dan banyak lagi. Mereka boleh digunakan secara individu atau dalam kombinasi, menawarkan kesan visual yang serba boleh. Sintaks asas adalah mudah:

mari kita meneroka penapis utama:

filter: <filter-function> [<filter-function>]* | none;

Konsep Utama:

penapis CSS mengubah suai elemen rendering

sebelum
• paparan, memberikan manipulasi imej yang cekap. Mereka mempunyai sokongan penyemak imbas yang luas dan memudahkan kesan yang pelbagai (kabur, kecerahan, kontras, bayang-bayang drop, kelabu, warna-warna, terbalik, kelegapan, tepu, sepia). Penapis boleh digabungkan dan animasi untuk visual dinamik. Perintah aplikasi mempengaruhi hasil akhir, dengan beberapa penapis berpotensi mengatasi orang lain. Mereka memohon kepada pelbagai elemen, termasuk imej, video, dan iframes.
• Walaupun secara amnya, penapis
mungkin lebih perlahan tanpa pecutan perkakasan.
• Prestasi penapis bergantung pada penapis SVG yang digunakan. Penyemak imbas utama menyokong harta blur, tetapi Internet Explorer adalah pengecualian. url() filter

Fungsi penapis individu:

• Kecerahan:

  Kawalan kecerahan imej. Menerima nilai ≥ 0; 0% adalah hitam, 100% adalah asal, dan nilai & gt; 100% meningkatkan kecerahan. filter: brightness(300%);

• kontras:

  Laraskan kontras imej. Nilai ≥ 0; 0% menghasilkan imej skala kelabu, 100% adalah nilai asal, dan lebih tinggi meningkatkan kontras. filter: contrast(0%);

• Grayscale:

  Menukar imej ke skala kelabu. Nilai berkisar dari 0% (tiada kesan) hingga 100% (skala kelabu sepenuhnya). filter: grayscale(100%);

• tepu:

  mengawal ketepuan warna. 0% menghilangkan semua warna, 100% adalah asal, dan nilai & gt; 100% supersaturatate. filter: saturate(0%);

• sepia:

  memohon nada sepia. 0% adalah asal, 100% adalah sepia sepenuhnya. filter: sepia(100%);

• hue-rotate:

  berputar warna imej. 0deg tidak berubah; Nilai & gt; 360deg bungkus. filter: hue-rotate(90deg);

• Invert:

  Inverts Warna Imej. 0% tidak mempunyai kesan, 100% terbalik sepenuhnya. filter: invert(100%);

• Blur:

  Memohon Blur Gaussian. Radius (dalam piksel) menentukan intensiti kabur.

• Opacity: mengawal ketelusan. 0% sepenuhnya telus, 100% adalah legap. filter: opacity(75%);

• drop-shadow: menambah bayang-bayang drop. Memerlukan offset X dan Y, warna, dan pilihan radius kabur. filter: drop-shadow(5px 5px 10px #666);

• url (): Membolehkan menggunakan penapis SVG tersuai. Rujukan ID Penapis SVG. Prestasi berbeza -beza berdasarkan penapis SVG.

menggabungkan dan menghidupkan penapis:

Pelbagai penapis boleh digabungkan; Perintah perkara, kerana beberapa penapis mengatasi orang lain. Animasi mencipta kesan dinamik menggunakan peralihan atau animasi CSS.

Nota Tambahan:

Penapis mempengaruhi semua bahagian elemen (latar belakang, sempadan, teks). Mereka boleh digunakan untuk video dan iframes. Prestasi biasanya baik, kecuali blur (tanpa pecutan perkakasan) dan url() (bergantung kepada penapis SVG). Sokongan penyemak imbas sangat baik, tidak termasuk Internet Explorer.

Soalan -soalan yang sering ditanya:

Bahagian ini akan merangkumi jawapan kepada Soalan Lazim yang disediakan dalam teks asal, yang diubahsuai untuk kejelasan dan kesimpulan. Oleh kerana kekangan ruang, saya akan menghilangkannya di sini, tetapi mereka akan menjadi tambahan yang berharga kepada artikel akhir yang digilap.

Atas ialah kandungan terperinci Kesan penapis CSS: kabur, skala kelabu, kecerahan dan banyak lagi dalam CSS!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!