Как сделать полупрозрачный фон

Короткий ответ

Добавьте к цвету фона прозрачность через косую черту:

<div style="padding: 16px; background: url(/media/photo-400x250.jpg) center / cover;">
  <p style="margin: 0; padding: 12px; background: rgb(255 255 255 / 70%);">White background at 70%, text fully solid</p>
</div>

Последнее число — непрозрачность: 0% — полностью прозрачно, 100% — сплошной цвет. Можно писать и дробь: 0.7.

Другие форматы

Альфа-канал есть у всех форматов цвета:

.a { background: hsl(200 80% 50% / 0.3); }
.b { background: #00808080; } /* the last two hex digits are alpha */
.c { background: transparent; }

Почему не opacity

opacity делает прозрачным весь элемент вместе с текстом и детьми. Сравните:

<div style="padding: 12px; background: url(/media/photo-400x250.jpg) center / cover;">
  <p style="padding: 8px; background: black; color: white; opacity: 0.5;">opacity: text fades too</p>
  <p style="margin: 0; padding: 8px; background: rgb(0 0 0 / 50%); color: white;">rgb alpha: text stays solid</p>
</div>

Частая ошибка

Пытаются вернуть непрозрачность тексту через opacity: 1 у ребёнка — не выйдет: прозрачность родителя применяется ко всему, что внутри, и ребёнок не может стать «непрозрачнее» его. Делайте прозрачным только цвет фона.