Прозрачный фон списка с сохранением видимости текста в CSS3

Быстрый ответ

Функция rgba() в CSS используется для создания прозрачного фона. Параметр альфа-канала управляет прозрачностью: 0 означает полную невидимость, а 1 – полную непрозрачность.

background-color: rgba(0, 0, 0, 0.3); // Запомните, это "30% черноты"

Для полной прозрачности используйте:

background-color: rgba(0, 0, 0, 0); // Запомните, это "100% прозрачность" или "абсолютная прозрачность"

Для полной непрозрачности:

background-color: rgba(0, 0, 0, 1); // Запомните, это "100% черноты" или "абсолютная чернота"

Обращайте внимание при использовании свойства opacity в CSS — оно влияет на весь элемент, включая его содержимое!

Разбираем функции цвета

Цветовые функции, такие как rgba() и hsla(), оснащены удобным альфа-каналом, управляющим прозрачностью. Значение прозрачности может варьироваться от 0 до 1.

HEX-формат с альфа-параметром

HEX-формат также поддерживает альфа-параметр:

background-color: #00000080; // Запомните, это "50% прозрачности"

Значения альфа-параметра в HEX варьируются от 00 (полная прозрачность) до FF (полная непрозрачность).

Подробнее об этом расскажет наш спикер на видео

Совместимость и обновления CSS

Всегда проверяйте совместимость браузера для функций, например rgba() и hsla(), при помощи ресурса caniuse.com. Будьте в курсе новинок в модуле цвета CSS, чтобы использовать все новые возможности управления прозрачностью.

Визуализация

HTML-элемент без фона:

🔲 Чистое стекло = Стандартный фон

Добавление цвета с небольшой долей прозрачности не нарушает структуру прозрачности:

.element {
  background-color: rgba(255, 0, 0, 0.3); // Запомните, это "30% красного"
}

Получается следующее:

🔲🎨 Немного окрашено в красный цвет, по-прежнему прозрачное

Так выглядит HTML-элемент с легкими тонированными очками.

Овладеваем техниками прозрачности

Обеспечиваем читаемость на прозрачном фоне

При использовании прозрачного фона с текстом важно сохранять высокий контраст для удобства чтения:

.element {
  background-color: rgba(0, 0, 0, 0.5); // Запомните, это "50% прозрачного черного фона"
  color: white; // И идеально контрастный белый текст
}

Найдите гармоничное сочетание дизайна и удобства чтения.

Создаем воздушные градиенты

Экспериментируйте с градиентами, применяя различные уровни прозрачности:

.element {
  background: linear-gradient(
    to right,
    rgba(255, 0, 0, 0),  //  Сначала "полностью прозрачное"
    rgba(255, 0, 0, 1)   //  Затем "непрозрачное красное"
  );
}

Получаем эффект как при заходе или восходе солнца.

Применяем функции цвета для прозрачного фона

Используйте rgba или hsla, чтобы сделать фон прозрачным, при этом не изменяя видимость содержимого:

.element {
  background-color: rgba(0, 0, 0, 0.3); // Запомните, это "30% черного", но текст останется ясно видным
  color: inherit; // Цвет текста будет таким же, как у родительского элемента, сохраняйте стиль!
}

Изучаем дополнительные цветовые возможности

Разнообразим цветовую палитру:

background-color: rgba(255, 255, 255, 0.4); // Запомните, это "40% белого", как легкое перышко в воздухе

Или используйте HSLA для создания смеси оттенков и уровней прозрачности:

background-color: hsla(120, 100%, 50%, 0.3); // Все оттенки "30% зеленого", словно нотка весны в воздухе

Полезные материалы

1. Использование пользовательских свойств CSS (CSS Variables)...
2. Поддержка RGBA в браузерах | CSS-Tricks
3. Свойство background в CSS
4. HTML – Как сделать фон менее непрозрачным...
5. Прозрачные границы благодаря background-clip | CSS-Tricks
6. background-blend-mode | Codrops
7. Спецификация CSS Color Module Level 4