Затемнение цвета фона элемента с помощью CSS

Улучшение пользовательского интерфейса включает в себя выделение интерактивных элементов, таких как кнопки, путем изменения их внешнего вида. Распространенный подход — затемнение цвета фона при наведении курсора.

Изначально можно попытаться настроить непрозрачность, но это повлияет как на цвет, так и на прозрачность. Существует более целенаправленное решение.

Метод: наложение темного слоя

Создайте темное наложение, используя фоновое изображение. Этот метод сохраняет исходный цвет текста, одновременно затемняя фон.

Реализуйте слой наложения в CSS:

.Button {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

.Button:hover {
  background-color: /* Original background color */;
}

Этот метод автоматически затемняет любой цвет фона, даже несколько цветов, как показано в примере:

 some text 
Используя этот метод наложения, разработчики могут легко затемнять цвета фона элемента при наведении курсора, повышая интерактивность пользователя без необходимости вручную рассчитывать более темные оттенки.