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