Свойства background-color и opacity отличаются при работе с полупрозрачными фонами следующим образом:

1. background-color задает цвет фона. 1 Его можно применять как к отдельным элементам, так и ко всему веб-сайту с помощью тега . 1
2. opacity задает значение прозрачности. 24 При использовании этого свойства прозрачность будет применена ко всему содержимому элемента, в том числе к тексту и дочерним элементам. 3

Таким образом, background-color задает цвет фона, а opacity — степень прозрачности элемента и любого из его дочерних элементов. 4

Если полупрозрачным должен быть только фон определённого элемента, а текст оставаться непрозрачным, то лучше использовать формат RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1