Monoton Gambar dengan CSS - Trik CSS

Anonim

Anda boleh menggunakan penapis pada elemen untuk menjadikannya monoton dalam arti skala kelabu:

Lihat Pen Monoton-Gambar oleh Chris Coyier (@chriscoyier) di CodePen.

Sekiranya anda memasukkannya ke dalam bekas dengan warna latar dan mengurangkan kelegapan, anda boleh mendapatkan kesan monoton berwarna:

Lihat Pen Monoton-Gambar oleh Chris Coyier (@chriscoyier) di CodePen.

Maarten van der Velde menulis untuk mengatakan bahawa daripada menurunkan kelegapan, kita boleh menggabungkannya dengan mix-blend-modedan meledakkan kontras:

Lihat Pen Monoton-Gambar oleh Chris Coyier (@chriscoyier) di CodePen.

Amelia Bellamy-Royds juga membuat liputan menggunakan penapis warna SVG untuk melakukan ini, yang mempunyai jumlah kawalan yang luar biasa:

Lihat Pen SVG Filter Grey -> Invert Monochrome Color oleh Amelia Bellamy-Royds (@AmeliaBR) di CodePen.