Коротко: убрать прозрачность в CSS — значит вернуть элементу полную непрозрачность. Основные пути: задать opacity: 1, использовать цвет без альфа-канала (#003F8F вместо rgba(...,.5)), убрать transparent, снять filter и проверить родителя, который «приглушает» потомков.
disabled-состояния, от rgba в фоне или от opacity у родителя. Разберём, как найти источник и убрать его.Три источника прозрачности
| Свойство | Что делает | Как убрать |
|---|---|---|
opacity |
прозрачность всего элемента | opacity: 1 |
rgba()/hsla() |
прозрачный цвет | заменить на HEX или rgb() |
filter: opacity() |
прозрачность через фильтр | filter: none |
Вкладки: способы убрать прозрачность
.card { opacity: 1; }Вернуть полную непрозрачность. Часто стоит opacity: .5 у «неактивных» карточек — уберите или переопределите.
/* было прозрачное */
background: rgba(0, 63, 143, 0.5);
/* стало непрозрачное */
background: #003F8F;
/* или */
background: rgb(0 63 143);Если прозрачность заложена в цвете — уберите альфа-канал. Это самый частый случай «полупрозрачного фона» или текста.
.blur-block {
filter: none; /* было filter: opacity(.7) */
}Прозрачность могут задавать через filter. Сброс в none убирает все фильтры сразу.
Свойство opacity наследует эффект на всех потомков: если у родителя opacity: .5, «внутренние» элементы нельзя сделать непрозрачными — максимум тоже .5.
/* Плохо: child не станет непрозрачным */
.parent { opacity: .5; }
.child { opacity: 1; } /* всё равно выглядит прозрачным */
/* Хорошо: прозрачный только фон родителя */
.parent { background: rgba(0,0,0,.5); opacity: 1; }Решение — не применять opacity к родителю, а красить фон через rgba.
opacity родителя «умножается» на всё содержимое. Локально вернуть непрозрачность ребёнку невозможно — нужно перенести прозрачность на фон.Как найти источник прозрачности
- Откройте DevTools (F12) → выберите элемент.
- Во вкладке Styles ищите
opacity,rgba,filter. - Вкладка Computed покажет итоговое
opacityэлемента. - Проверьте родителей: возможно, прозрачность пришла сверху.
- Переопределите нужное свойство или уберите проблемный класс.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Элемент остался прозрачным | opacity у родителя |
убрать у родителя, красить фон через rgba |
Не помогает opacity: 1 |
цвет задан через rgba | заменить цвет на непрозрачный |
| Пропадает при наведении | стиль :hover меняет opacity |
переопределить в hover |
| Картинка полупрозрачная | opacity самой картинки | задать opacity: 1 картинке |
Проверьте себя
opacity: 1 у дочернего элемента не сработает?
Вопросы и ответы
opacity делает прозрачным весь элемент вместе с текстом и картинками. rgba — только конкретный цвет (например, фон).
Если прозрачность в самом файле PNG — только пересохранить картинку без альфа-канала. Если в стилях — проверить opacity и filter на изображении.
transparent — полностью прозрачный цвет (ноль непрозрачности). Если фон не нужен, оставьте его; если нужен — задайте реальный цвет.
Есть правило :hover { opacity: … } или transition с прозрачностью. Переопределите стиль для :hover или уберите эффект.
Итоги
- Прозрачность задают
opacity,rgbaилиfilter. opacityу родителя нельзя «отменить» у ребёнка — красьте фон через rgba.- Ищите источник во вкладках Styles и Computed в DevTools.
- Проверяйте состояния hover/disabled — часто прозрачность осталась оттуда.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.