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