filter: grayscale()
En esta página
| Clase | Propiedades CSS |
|---|---|
grayscale |
filter: grayscale(100%); |
grayscale-<number> |
filter: grayscale(<number>%); |
grayscale-(<custom-property>) |
filter: grayscale(var(<custom-property>)); |
grayscale-[<value>] |
filter: grayscale(<value>); |
Examples#
Basic example#
Use utilities like grayscale and grayscale-75 to control the amount of grayscale effect applied to an element:
{
grayscale-0
grayscale-25
grayscale-50
grayscale
<!-- [!code classes:grayscale-0,grayscale-25,grayscale-50,grayscale] -->
<img class="grayscale-0 ..." src="/img/mountains.jpg" />
<img class="grayscale-25 ..." src="/img/mountains.jpg" />
<img class="grayscale-50 ..." src="/img/mountains.jpg" />
<img class="grayscale ..." src="/img/mountains.jpg" />