grayscale()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since setembro de 2016.
O grayscale() é uma função do CSS que modifica a imagem adicionada para as cores branco e preto . Esse resultado é um efeito "filtro". <filter-function>.
Experimente
filter: grayscale(0);
filter: grayscale(0.2);
filter: grayscale(60%);
filter: grayscale(1);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Sintaxe
grayscale(quantidade)
Parâmetros
quantidade-
A quantia da conversão é especificada em
<number>(número) ou<percentage>(porcentagem). Um valor de100%indica que a cor está compeltamente dentro da escala de cinza. Um valor de0%não altera as cores da imagem, que permanecerá igual a original. Valores entre0%e100%são multiplicadores lineares no efeito cinza, modificando a escala de cores conforme a quantidade determinada. A quantia em número é equivalente a em porcentagem.
grayscale(0) /* Não afeta a imagem */
grayscale(.7) /* .7 => 70% de branco&preto */
grayscale(100%) /* Completamente em branco&preto */