Bootstrap 5 Opacity: прозрачность элементов

Прозрачность (или непрозрачность) элементов в веб-дизайне играет важную роль. Она позволяет создавать интересные эффекты, управлять видимостью и визуально обогащать пользовательский интерфейс. В Bootstrap 5 мы можем легко контролировать прозрачность с помощью утилит .opacity-{значение}.

Основы прозрачности

Свойство opacity устанавливает уровень прозрачности для элемента. Уровень прозрачности описывает степень прозрачности, где:

1 - элемент полностью непрозрачен (не просвечивает),
0.5 - элемент виден на 50%,
0 - элемент полностью прозрачен (полностью просвечивает).

Примеры

Давайте рассмотрим примеры использования утилит .opacity. Установите значение opacity элемента с помощью утилит .opacity-{value}:

<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>
<div class="opacity-0">...</div>

Результат:

100%

75%

50%

25%

CSS

API утилит Sass

Утилиты Opacity объявлены в utilities API в scss/_utilities.scss. Узнайте, как использовать utilities API.

"opacity": (
  property: opacity,
  values: (
    0: 0,
    25: .25,
    50: .5,
    75: .75,
    100: 1,
  )
),

Заключение

Прозрачность - это мощный инструмент для создания эффектов и управления внешним видом элементов в веб-приложениях. С помощью утилит Bootstrap 5 вы можете легко настроить прозрачность и достичь желаемого визуального эффекта.

На этой странице