Diseño UI con CSS

Background-Color: Pintando la Caja

learn.cssBackgroundColor.Header.subtitle

Cada elemento HTML es una caja rectangular. La propiedad background-color nos permite 'pintar' el interior de esa caja. En este módulo exploraremos los diferentes formatos de color, cómo manejar la opacidad y cómo interactúa el fondo con los bordes y el contenido.

El color de fondo es la base sobre la que se construye el contraste y la jerarquía visual de cualquier interfaz.

Sintaxis Básica

La propiedad `background-color` define el color de relleno de un elemento. Por defecto, los elementos tienen un fondo `transparent` (transparente), lo que permite ver lo que hay detrás. Al asignar un color, este cubrirá toda el área de contenido y el área de relleno (padding), pero se detendrá antes del margen.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Aplicando color a todo el cuerpo del sitio */
body {
  background-color: #f0f0f0;
}

/* Una tarjeta con fondo blanco */
.tarjeta {
  background-color: white;
  padding: 20px;
}

/* Aplicando color a todo el cuerpo del sitio */
body {
  background-color: #f0f0f0;
}

/* Una tarjeta con fondo blanco */
.tarjeta {
  background-color: white;
  padding: 20px;
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.boton-hex {
  background-color: #ff5733;
}

.boton-rgb {
  background-color: rgb(255, 87, 51);
}

.boton-hex {
  background-color: #ff5733;
}

.boton-rgb {
  background-color: rgb(255, 87, 51);
}

Comparativa visual de paletas de color Hexadecimal y RGB — Ambos códigos generan visualmente el mismo color naranja vibrante, es solo una cuestión de preferencia de sintaxis.

Transparencias: RGBA

A veces necesitamos ver a través del elemento. Para esto usamos **RGBA**, donde la 'A' significa **Alpha** (transparencia). El valor Alpha va de `0` (invisible) a `1` (sólido). Un valor de `0.5` crea un efecto de cristal semitransparente, ideal para modales o barras de navegación flotantes.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.overlay-modal {
  /* Negro al 50% de opacidad */
  background-color: rgba(0, 0, 0, 0.5);
}

.aviso-sutil {
  /* Azul muy suave y transparente */
  background-color: rgba(0, 0, 255, 0.1);
}

.overlay-modal {
  /* Negro al 50% de opacidad */
  background-color: rgba(0, 0, 0, 0.5);
}

.aviso-sutil {
  /* Azul muy suave y transparente */
  background-color: rgba(0, 0, 255, 0.1);
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* ❌ El texto también se verá borroso/transparente */
.error-comun {
  background-color: black;
  opacity: 0.5;
}

/* ✅ El fondo es transparente, el texto es nítido */
.solucion-correcta {
  background-color: rgba(0, 0, 0, 0.5);
}

/* ❌ El texto también se verá borroso/transparente */
.error-comun {
  background-color: black;
  opacity: 0.5;
}

/* ✅ El fondo es transparente, el texto es nítido */
.solucion-correcta {
  background-color: rgba(0, 0, 0, 0.5);
}

Ejemplo visual de la diferencia entre opacity y rgba en el fondo — A la izquierda, 'opacity' desvanece todo el elemento. A la derecha, RGBA solo afecta al color de fondo.

Estados Interactivos: Hover

El cambio de color de fondo es la señal visual más clara para indicar interactividad. Usando la pseudo-clase `:hover`, podemos alterar el `background-color` cuando el usuario pasa el mouse por encima. **Tip:** Usa colores ligeramente más oscuros o claros que el original para crear un efecto de 'presión' o 'foco'.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.boton-accion {
  background-color: #007bff; /* Azul normal */
  transition: background-color 0.3s; /* Suaviza el cambio */
}

.boton-accion:hover {
  background-color: #0056b3; /* Azul más oscuro */
}

.boton-accion {
  background-color: #007bff; /* Azul normal */
  transition: background-color 0.3s; /* Suaviza el cambio */
}

.boton-accion:hover {
  background-color: #0056b3; /* Azul más oscuro */
}

Accesibilidad y Contraste

Elegir un `background-color` conlleva la responsabilidad de elegir un color de texto (`color`) adecuado. Si el fondo es oscuro, el texto debe ser claro (y viceversa). Si no hay suficiente contraste, las personas con dificultades visuales no podrán leer tu contenido y Google podría penalizar el SEO de tu sitio.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* ✅ Alto Contraste */
.modo-oscuro {
  background-color: #121212;
  color: #ffffff;
}

/* ❌ Bajo Contraste (Difícil de leer) */
.mala-practica {
  background-color: #ffffff;
  color: #eeeeee; /* Gris claro sobre blanco */
}

/* ✅ Alto Contraste */
.modo-oscuro {
  background-color: #121212;
  color: #ffffff;
}

/* ❌ Bajo Contraste (Difícil de leer) */
.mala-practica {
  background-color: #ffffff;
  color: #eeeeee; /* Gris claro sobre blanco */
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.caja-dinamica {
  color: red;
  /* El fondo será rojo automáticamente */
  background-color: currentColor; 
}

.caja-dinamica {
  color: red;
  /* El fondo será rojo automáticamente */
  background-color: currentColor; 
}

Ejemplo de herencia de color usando currentColor — CurrentColor actúa como una variable nativa que lee el color del texto actual y lo aplica donde se le indique.

¿Por qué mi background-color no aparece?

Asegúrate de que el elemento tenga altura (`height`) o contenido dentro. Si un `div` está vacío y no tiene altura definida, su tamaño es 0x0 píxeles, por lo que el fondo no tiene dónde pintarse.

¿Cómo hago un degradado (gradiente) de colores?

Técnicamente, un degradado NO es un color, sino una imagen generada por el navegador. No se usa `background-color`, sino la propiedad `background-image: linear-gradient(...)`.

¿Puedo poner una imagen y un color de fondo a la vez?

Sí. El color actúa como respaldo (fallback) mientras carga la imagen, o se ve a través de las partes transparentes de la imagen (como un PNG). Se definen por separado o usando la propiedad abreviada `background`.

¿El background-color se hereda de padres a hijos?

No. El valor por defecto es `transparent`. Si pones un fondo rojo al `body`, los `divs` hijos no son rojos, son transparentes, por lo que *vemos* el rojo del body a través de ellos.

¿Qué es el canal Alfa en Hexadecimal?

Es una notación moderna (#RRGGBBAA). Puedes añadir dos dígitos extra al final del hex para la transparencia. Ej: `#00000080` es negro al 50% de opacidad. Es lo mismo que `rgba`, pero más corto.

¿Cómo quito el color de fondo de un botón por defecto?

Usa `background-color: transparent;`. Esto es muy común para crear botones de tipo 'borde' o iconos sin caja visible.

¿Funciona background-color en elementos de línea como <span>?

Sí, pero solo cubrirá el espacio exacto del texto. Si quieres que sea un bloque de color completo, deberás cambiar el elemento a `display: block` o `inline-block`.

¿Cómo hago que el fondo cambie suavemente al pasar el mouse?

Debes usar la propiedad `transition`. Por ejemplo: `transition: background-color 0.5s ease;`. Sin esto, el cambio de color será brusco e instantáneo.

¿Puede el background-color salirse de los bordes redondeados?

A veces sí, si el hijo tiene fondo y el padre bordes redondeados. Para corregirlo, aplica `overflow: hidden;` al elemento padre para recortar el color sobrante.

¿Qué pasa si uso nombres de colores en español?

CSS solo entiende inglés. `background-color: rojo;` no funcionará. Debes usar `red` o su código hexadecimal.