Monotone uma imagem com CSS - CSS-Tricks

Anonim

Você sempre pode aplicar um filtro a um elemento para torná-lo monótono no sentido da escala de cinza:

Veja a Pen Monotone-ing an Image de Chris Coyier (@chriscoyier) no CodePen.

Se você colocar isso em um contêiner com uma cor de fundo e diminuir a opacidade, poderá obter um tipo de efeito monótono colorido:

Veja a Pen Monotone-ing an Image de Chris Coyier (@chriscoyier) no CodePen.

Maarten van der Velde escreveu para dizer que, em vez de diminuir a opacidade, podemos combiná-la mix-blend-modee eliminar o contraste:

Veja a Pen Monotone-ing an Image de Chris Coyier (@chriscoyier) no CodePen.

Amelia Bellamy-Royds também abordou o uso de filtros de cores SVG para fazer isso, que tem uma quantidade incrível de controle:

Veja os Filtros SVG da Caneta Cinza -> Inverter Cor Monocromática de Amelia Bellamy-Royds (@AmeliaBR) no CodePen.