CSS · оформление

Свойство opacity

opacity задаёт прозрачность всему элементу вместе с его содержимым. Значение 1 означает полную непрозрачность, 0 — полную прозрачность.

Прозрачность всего блока

Если уменьшить opacity карточки, прозрачными станут фон, текст, изображения и границы. Это подходит для состояния отключённого элемента, но не для полупрозрачного фона под обычным текстом.

.button:disabled {
  opacity: .55;
}

Прозрачный цвет

Чтобы изменить только фон, используй цвет с alpha-каналом. Текст внутри сохранит контраст.

.notice {
  background: rgb(99 102 241 / .12);
  color: #312e81;
}

Невидимый элемент остаётся

opacity: 0 скрывает элемент визуально, но он сохраняет место, может получать фокус и реагировать на клики. Для полного удаления из раскладки подходит display: none, а для анимации часто дополнительно меняют visibility и pointer-events.

.popup { opacity: 0; visibility: hidden; }
.popup.is-open { opacity: 1; visibility: visible; }

Частые ошибки

• Делать прозрачным родителя ради фона.
• Считать opacity: 0 полноценным скрытием.
• Снижать контраст текста ниже читаемого уровня.
• Забывать про фокус невидимых элементов.

Связанные темы

color · transition · z-index