Загрузка...

Прозрачность (opacity) в CSS

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

Что делает opacity?

Свойство opacity задаёт непрозрачность элемента. Значение идёт от 1 (полностью сплошной, часто по умолчанию) до 0 (полностью невидимый). Дробные вроде 0.5 посередине. Важно: opacity действует на элемент и всё внутри — текст, рамки, фоны и дочерние блоки тускнеют вместе.

Opacity против альфы цвета

Эти две идеи легко смешать. Держите их раздельно.

📊 Opacity против альфы цвета

Инструмент Что тускнеет Типичное использование
opacity Весь элемент (и его дети) Мягкие оверлеи, вид disabled, позже fade-анимация
Альфа rgba() / hsla() Только этот цветовой слой Прозрачные фоны с плотным текстом сверху
Ключевое слово transparent Полностью прозрачное цветовое значение Спрятать цвет рамки, не удаляя свойство
visibility: hidden Визуально скрыто, layout остаётся Другой инструмент — здесь не углубляемся

Полностью сплошной и наполовину тусклый

Сначала сравните 1 и 0.5 на одном дизайне карточки.

Сплошной против половинной opacity

css
CSS Code 
.card-solid {
opacity: 1;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

.card-soft {
opacity: 0.5;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

Что вы должны заметить

На .card-soft и фон, и текст выглядят вымытыми. Opacity не щадит буквы.

Дети тускнеют вместе с родителем

Если у родителя opacity: 0.4, вложенные заголовки и кнопки не «выпрыгнут», поставив свой opacity: 1. Они уже рисуются внутри тусклого слоя.

Opacity родителя смывает детей

css
CSS Code 
.overlay {
opacity: 0.4;
background-color: #0f172a;
color: white;
padding: 1rem;
}

.overlay strong {
opacity: 1; /* не возвращает полную силу внутри тусклого родителя */
}

Дизайн-вывод

Матовая панель с чётким текстом? Смягчите цвет фона через rgba, а не весь элемент через opacity.

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

Здесь фон панели полупрозрачный, а текст остаётся на полной силе.

Мягкая заливка, плотный текст

css
CSS Code 
.panel {
background-color: rgba(15, 118, 110, 0.25);
color: #042f2e; /* текст на полной силе */
padding: 1rem;
}

Привычка приглушённого UI

Частый приём: чуть снизить opacity у вторичных действий или отключённых контролов, чтобы они звучали тише — контраст всё равно читаемый.

Приглушённая вторичная кнопка

css
CSS Code 
.btn-secondary {
opacity: 0.75;
background-color: #e2e8f0;
color: #0f172a;
border: none;
padding: 0.5rem 1rem;
}

Ноль невидим — место может остаться

opacity: 0 делает элемент невидимым, но он всё ещё может занимать место в вёрстке и в зависимости от контекста принимать события указателя. Чтобы убрать из layout, нужен другой инструмент (display: none), не одна opacity.

Невидимый, но ещё в потоке

css
CSS Code 
.ghost {
opacity: 0;
}

Попробуйте сами

  1. Две карточки с теми же цветами; одна opacity: 1, другая opacity: 0.5.
  2. Жирная строка внутри родителя с opacity: 0.4 — убедитесь, что ребёнка нельзя полностью «растускнить».
  3. Пересоберите мягкий вид через background-color: rgba(…, 0.25) и плотный color.
  4. Вторичная кнопка с opacity: 0.75 — проверьте читаемость.
  5. По желанию: opacity: 0 на блоке и заметьте щель в вёрстке.

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

  • Ставить opacity на родителя, когда нужен только прозрачный фон
  • Ждать, что ребёнок с opacity: 1 будет полностью плотным внутри тусклого родителя
  • Использовать opacity: 0 вместо удаления места из layout
  • Опускать opacity так низко, что текст теряет контраст
  • Путать ключевое слово transparent со свойством opacity

Кратко

  • opacity задаёт прозрачность всего элемента (0–1)
  • Дети тускнеют с родителем — изнутри полностью не вырваться
  • Для мягких фонов с плотным текстом предпочитайте альфу rgba / hsla
  • Низкая opacity может приглушить UI; думайте о доступности
  • Невидимый (0) — не то же самое, что убран из layout
  • Практикуйте пару карточек и пересборку через rgba, пока разница не станет очевидной

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок