backdrop-filter: hue-rotate()
En esta página
| Clase | Propiedades CSS |
|---|---|
backdrop-hue-rotate-<number> |
backdrop-filter: hue-rotate(<number>deg); |
-backdrop-hue-rotate-<number> |
backdrop-filter: hue-rotate(calc(<number>deg * -1)); |
backdrop-hue-rotate-(<custom-property>) |
backdrop-filter: hue-rotate(var(<custom-property>)); |
backdrop-hue-rotate-[<value>] |
backdrop-filter: hue-rotate(<value>); |
Examples#
Basic example#
Use utilities like backdrop-hue-rotate-90 and backdrop-hue-rotate-180 to rotate the hue of an element's backdrop:
{
backdrop-hue-rotate-90
backdrop-hue-rotate-180
backdrop-hue-rotate-270
<!-- [!code classes:backdrop-hue-rotate-90,backdrop-hue-rotate-180,backdrop-hue-rotate-270] -->
<div class="bg-[url(/img/mountains.jpg)]">
<div class="bg-white/30 backdrop-hue-rotate-90 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
<div class="bg-white/30 backdrop-hue-rotate-180 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
<div class="bg-white/30 backdrop-hue-rotate-270 ..."></div>
</div>
Using negative values#
Use utilities like -backdrop-hue-rotate-90 and -backdrop-hue-rotate-180 to set a negative backdrop hue rotation value:
{
-backdrop-hue-rotate-15
-backdrop-hue-rotate-45
-backdrop-hue-rotate-90
<!-- [!code classes:-backdrop-hue-rotate-15,-backdrop-hue-rotate-45,-backdrop-hue-rotate-90] -->
<div class="bg-[url(/img/mountains.jpg)]">
<div class="bg-white/30 -backdrop-hue-rotate-15 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
<div class="bg-white/30 -backdrop-hue-rotate-45 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
<div class="bg-white/30 -backdrop-hue-rotate-90 ..."></div>
</div>