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