Monotone una imagen con CSS - Trucos CSS

Anonim

Siempre puede aplicar un filtro a un elemento para que sea monótono en el sentido de la escala de grises:

Vea el Pen Monotone -ing una imagen de Chris Coyier (@chriscoyier) en CodePen.

Si pones eso en un recipiente con un color de fondo y bajas la opacidad, puedes obtener un efecto de color monótono:

Vea el Pen Monotone -ing una imagen de Chris Coyier (@chriscoyier) en CodePen.

Maarten van der Velde escribió para decir que en lugar de reducir la opacidad, podemos combinarlo mix-blend-modey eliminar el contraste:

Vea el Pen Monotone -ing una imagen de Chris Coyier (@chriscoyier) en CodePen.

Amelia Bellamy-Royds también cubrió el uso de filtros de color SVG para hacer esto, que tiene una increíble cantidad de control:

Consulte los filtros SVG de lápiz gris -> Invertir color monocromo de Amelia Bellamy-Royds (@AmeliaBR) en CodePen.