Propiedad "background-color" en CSS

En CSS, la propiedad background-color se utiliza para definir el color de fondo de un elemento HTML. Es una manera sencilla de agregar color y mejorar la apariencia visual de un elemento en la página web.

¿Qué es la propiedad "background-color"?

La propiedad background-color en CSS permite definir el color de fondo de un elemento HTML. Se puede especificar el color de fondo de forma individual para cada elemento en la página.

Ejemplo de Uso

Veamos un ejemplo de cómo se utiliza la propiedad background-color en CSS:

<div class="caja">
  Esto es una caja con color de fondo.
</div>
  

Y el CSS correspondiente:

.caja {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border: 2px solid #333;
}

En este ejemplo, hemos creado una caja con la clase .caja y le hemos aplicado un color de fondo de #f0f0f0, que es un gris claro. El color de fondo se muestra dentro de los límites del borde de la caja.

Valores de la Propiedad "background-color"

La propiedad background-color puede tomar varios valores:

• background-color: #f0f0f0; - Color hexadecimal (#f0f0f0).
• background-color: rgb(255, 0, 0); - Color RGB (rojo puro).
• background-color: rgba(255, 0, 0, 0.5); - Color RGBA (rojo con transparencia).
• background-color: hsl(120, 100%, 50%); - Color HSL (verde).