Penjana Penapis CSS

Laras kesan seperti kekaburan dan kecerahan menggunakan gelangsar dan tinjau kod filter CSS semasa menghasilkan

Maklumat kemas kiniTambah Penjana Penapis CSS, hasilkan dengan melaraskan kekaburan dan kecerahanLihat Maklumat Terkini

Ciri-ciri

9 jenis kesan dengan gelangsar

Pratonton dan kod CSS berubah serentak setiap kali digerakkan

Cubalah dengan imej anda sendiri

Paparkan imej dari peranti anda dalam pelayar dan sahkan kesan

Tekan sahaja untuk imej asal

Bandingkan sebelum dan selepas kesan digunakan di tempat yang sama

Penalaan halus dari 8 sampel

Mulai dari sampel seperti sepia atau vintaj dan laras

Cara Penggunaan

Pilih imej

Gunakan "Pilih imej anda" untuk menentukan imej dari peranti anda. Jika tidak dipilih, anda boleh mencuba dengan imej sampel terbina dalam

Laras kesan

Pilih sampel dengan suasana yang serupa atau laras kekuatan kesan menggunakan setiap gelangsar

Bandingkan sebelum dan selepas

Tekan "Bandingkan dengan imej asal" untuk memaparkan imej tanpa kesan semasa ditekan

Salin kod

Gunakan butang "Salin" untuk menyalin satu baris filter ke CSS anda sendiri

Kes Penggunaan

Kebolehbacaan teks pada latar belakang fotografi

Kaburi sedikit fotografi latar belakang untuk membuat tajuk yang terletak di atasnya lebih mudah dibaca

Penyatuan warna fotografi

Padankan fotografi pada halaman pasukan atau galeri dengan menjadikannya hitam putih atau sepia

Tetapkan nilai dengan fotografi milik sendiri

Gunakan fotografi sebenar yang akan digunakan untuk memutuskan nilai untuk kesan pudar atau vintaj

Pelarasan imej untuk mod gelap

Tetapkan nilai dengan kecerahan dan kontras yang berkurangan supaya imej tidak terlalu terang pada latar belakang gelap

Pengetahuan Asas

Fungsi dan unit filter

Sifat penapis CSS adalah sifat yang menggunakan kesan pada penampilan imej atau elemen, dan ditulis dengan menyusun fungsi seperti blur dan sepia yang dipisahkan oleh ruang putih separuh lebar.

px (piksel)：Fungsi blur ialah fungsi yang menentukan jejari kekaburan dalam px, dan apabila 4px ditentukan, warna akan bercampur dalam julat jejari 4 piksel.
% (peratusan)：Fungsi brightness dan sepia ialah fungsi yang menentukan kekuatan kesan dalam %, dan dalam fungsi brightness, 100% ialah kecerahan asal dan 120% ialah keadaan 20% lebih terang.
deg (darjah)：Fungsi hue-rotate ialah fungsi yang menentukan sudut untuk memutarkan warna pada roda warna dalam deg, dan apabila 180deg ditentukan, warna akan beralih ke warna pada sisi bertentangan roda warna.

Mengapa hasil berubah mengikut urutan penulisan

Fungsi yang disusun dalam penapis digunakan dari kiri ke kanan, dan kesan seterusnya digunakan pada hasil dari kesan sebelumnya, jadi penampilan mungkin berubah apabila urutan penyusunan berubah. Contohnya, jika hitam putih digunakan terlebih dahulu dan kemudian sepia digunakan, warna coklat kekal, tetapi jika sepia digunakan terlebih dahulu dan kemudian hitam putih digunakan, warna coklat hilang. Dalam alat ini, urutan aplikasi adalah tetap, tetapi anda boleh mengubah urutan dengan mengedit kod CSS yang dijana.

Perbezaan dengan backdrop-filter

Filter dan backdrop-filter ialah sifat yang boleh menggunakan fungsi yang sama, tetapi sasaran untuk menggunakan kesan berbeza.

filter：Filter ialah sifat yang menggunakan kesan pada penampilan elemen itu sendiri (seperti imej atau teks).
backdrop-filter：Backdrop-filter ialah sifat yang menggunakan kesan pada bahagian yang kelihatan di belakang elemen yang ditentukan, dan digunakan untuk ungkapan seperti kaca bersemak.