Когда использовать background-color: transparent для сброса фона

«Когда использовать background-color: transparent для сброса фона» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Используй background-color: transparent в следующих случаях:

  1. Сброс наследуемого фона – когда нужно убрать фон, унаследованный от родителя.
  2. Анимации и переходы – для плавного появления/исчезновения фона через transition.
  3. Переопределение стилей – если нужно отменить ранее заданный фон (например, в медиазапросах или состояниях :hover).

Пример:

.button {
  background-color: blue;
}

.button.transparent {
  background-color: transparent; /* Убираем синий фон */
}

Важно: transparent не то же самое, что none – он создаёт прозрачный слой, который может влиять на события мыши.