Вместо исправления общего фона или цвета текста, для читаемости переднего плана вы можете добавить background-color к элементу, содержащему текст, который вы хотите подчеркнуть. Эта проблема использует rgba() вместо hex кодов или нормальный rgb() .
rgba акроним расшифровывается как:Значения RGB могут находиться в диапазоне от 0 до 255. Значение альфа может варьироваться от 1, полностью непрозрачного или сплошного цвета, до 0, что является полностью прозрачным или невидимым.
r = красный
g = зеленый
b = синий
a = альфа / уровень непрозрачности
rgba() отлично подходит для использования в этом случае, так как он позволяет вам регулировать непрозрачность. Это означает, что вам не нужно полностью блокировать фон. Для этой задачи вы будете использовать background-color: rgba(45, 45, 45, 0.1) . Он производит темно-серый цвет, который почти прозрачен, учитывая низкое значение непрозрачности 0,1.Чтобы текст сильнее выделялся, отрегулируйте background-color элемента h4 на заданное значение rgba() . Также для h4 удалите свойство height и добавьте padding 10px.