Opacity и hsla отличаются подходами к настройке прозрачности элементов в CSS. 14

Opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. 1 Свойство изменяет прозрачность элементов, для которых установлено фоновое изображение или задан фон с помощью цвета или градиента. 1 Если элемент, для которого применено opacity, содержит внутри себя другие элементы, то они также изменят свою прозрачность. 1 Opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный). 14

HSLA позволяет задать полупрозрачный цвет. 1 Параметры функции означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha). 1 Оттенки цвета задаются в процентах, используя соответствующее значение из цветового круга. 1 HSLA подходит для дизайнеров, которые предпочитают работать с теорией цвета, а не с значениями RGB. 4

Таким образом, opacity влияет на прозрачность всего элемента, включая текст и фон, а HSLA позволяет контролировать прозрачность текста, при этом оставляя фон без изменений. 45