Tutorial de color de fondo HTML: cómo cambiar un color de fondo Div, explicado con ejemplos de código

Una de las cosas más comunes que puede tener que hacer como desarrollador web es cambiar el color de fondo de un elemento HTML. Pero puede resultar confuso hacerlo si no comprende cómo utilizar la background-colorpropiedad CSS .

En el artículo, discutimos

  • el valor de color de fondo predeterminado de un elemento HTML
  • cómo cambiar el color de fondo de un div, que es un elemento muy común
  • qué partes del modelo de caja CSS se ven afectadas por la background-colorpropiedad, y
  • los diferentes valores que puede tomar esta propiedad.

Color de fondo predeterminado de un elemento

El color de fondo predeterminado de un div es transparent. Entonces, si no especifica el color de fondo de un div, mostrará el de su elemento padre.

Cambiar el color de fondo de una div

En este ejemplo, cambiaremos los colores de fondo de los siguientes divs.

 I love HTML I love CSS I love JavaScript 

Sin ningún estilo, esto se traducirá en lo siguiente visualmente.

Cambiemos el color de fondo de los divs agregando estilos a las clases. Puede seguir probando los ejemplos en un archivo HTML.

 .div-1 { background-color: #EBEBEB; } .div-2 { background-color: #ABBAEA; } .div-3 { background-color: #FBD603; } I love HTML I love CSS I love JavaScript 

Esto resultará en lo siguiente:

¡Frio! Hemos cambiado con éxito el color de fondo de este div. A continuación, conozcamos más sobre esta propiedad. Veamos cómo afecta la propiedad background-color a partes del modelo CSS-box.

Color de fondo y modelo de caja CSS

Según el modelo de caja CSS, todos los elementos HTML se pueden modelar como cajas rectangulares. Cada caja se compone de 4 partes como se muestra en el diagrama a continuación.

Puede leer sobre el modelo de caja si no está familiarizado con él. La pregunta es, ¿qué parte del modelo de caja se ve afectada cuando cambia el color de fondo de un div? La respuesta simple es el área de relleno y el área de contenido. Confirmemos esto usando un ejemplo.

  body { background-color: #ABBAEA; } div { height: 200px; margin: 20px; border: 5px solid; background-color: #FBD603; } 

This is the parent div which contains the div we are testing

This example shows that changing the background color of a div does not affect the border and margin of the div.

Esto resultará en:

En el ejemplo anterior, podemos ver que el área del margen y el área del borde no se ven afectados por el cambio en el color de fondo. Podemos cambiar el color del borde usando la propiedad border-color. El área del margen permanece transparente y refleja el color de fondo del contenedor principal.

Finalmente, analicemos los valores que puede tomar la propiedad background-color.

Valores de color de fondo

Al igual que la propiedad color, la propiedad background-color puede tomar seis valores diferentes. Consideremos los tres valores más comunes con un ejemplo. En el ejemplo, establecemos el color de fondo del div en rojo con diferentes valores.

 /* Keyword value/name of color */ .div-1 { background-color: red; } /* Hexadecimal value */ .div-2 { background-color: #FF0000; } /* RGB value */ .div-3 { background-color: rgb(255,0,0); } 

The background property can take six different values.

The background property can take six different values.

The background property can take six different values.

Observe que todos resultan con el mismo color de fondo.

Otros valores que background-colorpuede tomar la propiedad incluyen el valor HSL, valores de palabras clave especiales y valores globales. A continuación se muestran ejemplos de cada uno de ellos.

/* HSL value */ background-color: hsl(0, 100%, 25%; /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset; 

Puede leer más sobre cada uno de estos valores aquí.

Nota extra

Al configurar el color de fondo de un elemento, es importante asegurarse de que la relación de contraste del color de fondo y el color del texto que contiene sea lo suficientemente alta. Esto es para asegurar que las personas con baja visión puedan leer fácilmente el texto.

Considere estos dos divs.

El contraste entre el color de fondo del primer div y el color del texto no es lo suficientemente alto para que todos lo vean. Entonces, a menos que sea el único que usa el sitio web que está construyendo y tenga muy buena vista, debe evitar tales combinaciones de colores.

El segundo div tiene una relación de contraste mucho mejor entre el color de fondo y el color del texto. Por lo tanto, es más accesible y claro para que la gente lea.

Conclusión

En este artículo, vimos cómo se puede cambiar el color de fondo de un div. También discutimos qué partes del modelo de caja CSS se ven afectadas por el cambio en el color de fondo. Finalmente, discutimos los valores que puede tomar la propiedad background-color.

Espero que este artículo le haya resultado útil. Gracias por leer.