Oscurecimiento del color de fondo del elemento con CSS

Mejorar la interfaz de usuario implica resaltar elementos interactivos, como botones, alterando su apariencia. Un enfoque común es oscurecer el color de fondo al pasar el cursor.

Al principio, se podría intentar ajustar la opacidad, pero eso afecta tanto al color como a la transparencia. Existe una solución más específica.

Método: superponer una capa oscura

Cree una superposición oscura usando una imagen de fondo. Este método conserva el color del texto original mientras oscurece el fondo.

Implemente la capa de superposición en CSS:

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

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

Esta técnica oscurece automáticamente cualquier color de fondo, incluso varios colores, como se ve en el ejemplo:

 some text 
Al aprovechar este método de superposición, los desarrolladores pueden oscurecer fácilmente los colores de fondo de los elementos al pasar el mouse, mejorando la interactividad del usuario sin la molestia de calcular manualmente los tonos más oscuros.