Какие свойства регулируют прозрачность элемента?

Прозрачность элемента регулируют свойством `opacity` (весь элемент), альфа-каналом в цветах (`rgba`/`hsla`/`#rgba`) для фона/текста, и `background: transparent`.

Способы регулировать прозрачность

opacity (весь элемент)

Прозрачность всего элемента, включая содержимое и детей:

.el { opacity: 0.5; } /* 0 — прозрачный, 1 — непрозрачный */

Влияет на весь элемент (текст, фон, дочерние).

Альфа-канал в цвете (только это свойство)

Прозрачность конкретного цвета (фона или текста), не затрагивая содержимое:

.el {
  background: rgba(0, 0, 0, 0.5);   /* полупрозрачный фон */
  color: rgba(255, 255, 255, 0.8);  /* полупрозрачный текст */
  background: hsla(0, 0%, 0%, 0.5);
  background: #00000080;             /* hex с альфой */
  background: rgb(0 0 0 / 50%);      /* современный синтаксис */
}

Текст остаётся непрозрачным при полупрозрачном фоне (в отличие от opacity).

background: transparent

Полностью прозрачный фон.

opacity против rgba

• opacity — весь элемент и дети прозрачны.
• rgba/альфа — прозрачен только конкретный цвет (фон/текст), содержимое — нет.

/* Полупрозрачный фон, но чёткий текст → rgba, не opacity */
.overlay { background: rgba(0, 0, 0, 0.5); }

Нюанс

opacity < 1 создаёт контекст наложения (влияет на z-index) и рендерит слой (может влиять на производительность).

Коротко для собеседования

Прозрачность: opacity (весь элемент и дети — 0..1) или альфа-канал в цвете (rgba/hsla/hex с альфой — прозрачен только фон/текст, содержимое чёткое). Для полупрозрачного фона с чётким текстом — rgba, не opacity. background: transparent — полностью прозрачный. opacity < 1 создаёт контекст наложения.