backdrop-filter: opacity()
En esta página
| Clase | Propiedades CSS |
|---|---|
backdrop-opacity-<number> |
backdrop-filter: opacity(<number>%); |
backdrop-opacity-(<custom-property>) |
backdrop-filter: opacity(var(<custom-property>)); |
backdrop-opacity-[<value>] |
backdrop-filter: opacity(<value>); |
Examples#
Basic example#
Use utilities like backdrop-opacity-50 and backdrop-opacity-75 to control the opacity of all the backdrop filters applied to an element:
{
backdrop-opacity-10
backdrop-opacity-60
backdrop-opacity-95
<!-- [!code classes:backdrop-opacity-10,backdrop-opacity-60,backdrop-opacity-95] -->
<div class="bg-[url(/img/mountains.jpg)]">
<div class="bg-white/30 backdrop-invert backdrop-opacity-10 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
<div class="bg-white/30 backdrop-invert backdrop-opacity-60 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
<div class="bg-white/30 backdrop-invert backdrop-opacity-95 ..."></div>
</div>