This page is being translated; the original is shown (Русский ).
Прозрачность элемента
Классы filter-opacity-* задают прозрачность элемента функцией opacity()
свойства filter. Видимый результат тот же, что у
opacity-*
Пример
Шкала
Номер ступени — десятки процентов непрозрачности: filter-opacity-3 — 30%, filter-opacity-full — 100%.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-2 sm:grid-col-4 lg:grid-col-6 gap-3" >
<div class ="flex flex-col gap-1" >
<img class ="w-full h-e4 object-cover radius-1 filter-opacity-0" src ="assets/color-study.jpg" alt ="" >
<code class ="text-1/2 color-on-surface-variant" >filter-opacity-0</code >
</div >
<div class ="flex flex-col gap-1" >
<img class ="w-full h-e4 object-cover radius-1 filter-opacity-1" src ="assets/color-study.jpg" alt ="" >
<code class ="text-1/2 color-on-surface-variant" >filter-opacity-1</code >
</div >
<div class ="flex flex-col gap-1" >
<img class ="w-full h-e4 object-cover radius-1 filter-opacity-2" src ="assets/color-study.jpg" alt ="" >
<code class ="text-1/2 color-on-surface-variant" >filter-opacity-2</code >
</div >
<div class ="flex flex-col gap-1" >
<img class ="w-full h-e4 object-cover radius-1 filter-opacity-3" src ="assets/color-study.jpg" alt ="" >
<code class ="text-1/2 color-on-surface-variant" >filter-opacity-3</code >
</div >
<div class ="flex flex-col gap-1" >
<img class ="w-full h-e4 object-cover radius-1 filter-opacity-4" src ="assets/color-study.jpg" alt ="" >
<code class ="text-1/2 color-on-surface-variant" >filter-opacity-4</code >
</div >
<div class ="flex flex-col gap-1" >
<img class ="w-full h-e4 object-cover radius-1 filter-opacity-5" src ="assets/color-study.jpg" alt ="" >
<code class ="text-1/2 color-on-surface-variant" >filter-opacity-5</code >
</div >
<div class ="flex flex-col gap-1" >
<img class ="w-full h-e4 object-cover radius-1 filter-opacity-6" src ="assets/color-study.jpg" alt ="" >
<code class ="text-1/2 color-on-surface-variant" >filter-opacity-6</code >
</div >
<div class ="flex flex-col gap-1" >
<img class ="w-full h-e4 object-cover radius-1 filter-opacity-7" src ="assets/color-study.jpg" alt ="" >
<code class ="text-1/2 color-on-surface-variant" >filter-opacity-7</code >
</div >
<div class ="flex flex-col gap-1" >
<img class ="w-full h-e4 object-cover radius-1 filter-opacity-8" src ="assets/color-study.jpg" alt ="" >
<code class ="text-1/2 color-on-surface-variant" >filter-opacity-8</code >
</div >
<div class ="flex flex-col gap-1" >
<img class ="w-full h-e4 object-cover radius-1 filter-opacity-9" src ="assets/color-study.jpg" alt ="" >
<code class ="text-1/2 color-on-surface-variant" >filter-opacity-9</code >
</div >
<div class ="flex flex-col gap-1" >
<img class ="w-full h-e4 object-cover radius-1 filter-opacity-full" src ="assets/color-study.jpg" alt ="" >
<code class ="text-1/2 color-on-surface-variant" >filter-opacity-full</code >
</div >
</div >
При наведении
Наведите указатель на изображение: оно становится непрозрачным.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-1 items-start" >
<img class ="w-f6 h-e8 object-cover radius-1 transition filter-opacity-3 hover:filter-opacity-full" src ="assets/color-study.jpg" alt ="" >
<code class ="text-1/2 color-on-surface-variant" >filter-opacity-3 hover:filter-opacity-full</code >
</div >
Классы
Класс
CSS
Значения
filter-opacity-1filter: opacity(0.1)—
filter-opacity-2filter: opacity(0.2)—
filter-opacity-3filter: opacity(0.3)—
filter-opacity-4filter: opacity(0.4)—
filter-opacity-5filter: opacity(0.5)—
filter-opacity-6filter: opacity(0.6)—
filter-opacity-7filter: opacity(0.7)—
filter-opacity-8filter: opacity(0.8)—
filter-opacity-9filter: opacity(0.9)—
filter-opacity-fullfilter: opacity(1)—
filter-opacity-0filter: opacity(0)—
Условия (что это ): ширина экрана — нет; состояния — hover:. Например: hover:filter-opacity-1.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Шкала
Класс
Непрозрачность
filter-opacity-00
filter-opacity-1 … filter-opacity-90.1 … 0.9
filter-opacity-full1
filter-opacity или opacity
Для интерфейса берите opacity-*filter и не мешают другим
фильтрам. filter-opacity-* подходит, когда прозрачность должна меняться
вместе с другими функциями фильтра в собственном CSS проекта.
HTML wrap_text Wrap source lines content_copy Copy
<img class ="filter-opacity-3 hover:filter-opacity-full transition" src ="photo.jpg" alt ="Фотография" >
Ограничения
Класс задаёт свойство filter целиком: с классом другого фильтра на том же
элементе действует тот, чьё правило стоит в CSS позже.
Прозрачный элемент занимает место и принимает щелчки. Чтобы он их не
принимал, добавьте pointer-events-none
Любое значение, в том числе filter-opacity-full, создаёт у элемента новый
контекст наложения и содержащий блок для потомков с position: fixed.
См. также
Предыдущая Инвертирование цвета элемента Следующая Насыщенность элемента
