Una de las cosas más comunes que tendrás que hacer como desarrollador web es cambiar el color de fondo de un elemento HTML. Pero puede sé confuso de hacer si no entiendes como usar la propiedad   background-color de CSS.

En este artículo, vamos a hablar:

  • El valor por defecto del color de fondo de un elemento HTML.
  • Como cambiar el color de fondo de un div,  el cual elemento muy común.
  • Que partes del box model de CSS son afectadas por la propiedad background-color y los diferentes valores que esta propiedad puede tomar.

Color de fondo por defecto de un  elemento

El color de fondo por defecto de un div es transparent. Entonces si tu no especificas el background-color de un div, va a mostrar eso en su elemento padre.

Cambiando el color de fondo de un div

En este ejemplo, vamos a cambiar los colores de fondo de los siguientes divs.

<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>

Sin ningún estilo, esto se va a traducir a lo siguiente:

Screen-Shot-2020-05-08-at-12.22.48-PM

Vamos a cambiar el color de fondo de los div añadiendo nuevos estilos a las clases. Puedes seguir este ejemplo  en un archivo HTML.

<style>
    .div-1 {
        background-color: #EBEBEB;
    }
    
    .div-2 {
    	background-color: #ABBAEA;
    }
    
    .div-3 {
    	background-color: #FBD603;
    }
</style>

<body>
    <div class="div-1"> I love HTML </div>
    <div class="div-2"> I love CSS </div>
    <div class="div-3"> I love JavaScript </div>
</body>

Esto resulta en lo siguiente:

Screen-Shot-2020-05-08-at-11.12.29-AM-1

¡Bien! Hemos cambiado exitosamente el color de fondo de este div. Ahora vamos a conocer más acerca de esta propiedad. Vamos a ver como la propiedad background-color afecta una parte del CSS-box model.

Color de fondo y el modelo de caja

De acuerdo al CSS box model, todos los elementos HTML puede ser moldeados en cajas rectangulares. Cada caja está compuesta de 4 partes como muestra el diagrama de abajo.

Screen-Shot-2020-05-08-at-11.07.00-AM-1
The CSS Box Model

Puedes leer arriba el modelo de caja si no estás familiarizado con este. La pregunta es, ¿cuál parte del modelo de caja es afectado cuando cambias el color de fondo de un div?


<style>
    body {
        background-color: #ABBAEA;
    }
    div {
        height: 200px;
        margin: 20px;
        border: 5px solid;
        background-color: #FBD603;
    }
</style>
<body>
    <div>
        <p>This is the parent div which contains the div we are testing</p>

        <div>
            <p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
        </div>
    </div>
</body>


Este es el resultado:

Screen-Shot-2020-05-08-at-11.07.10-AM-1

En el ejemplo de arriba, podemos ver que el área de margen (margin) y área del borde (border area) no son afectadas por el cambio de color fondo. Podemos cambiar el color del borde usando la propiedad border-color. El área del margen permanece transparente y refleja el color fondo del contenedor padre.

Finalmente, podemos revisar los valores de la propiedad background-color puede tomar.

Valores de background-color

Justo como la propiedad de color, la propiedad background-color puede tomar seis diferentes valores. Vamos a considerar los tres valores más comunes con un ejemplo. En el ejemplo, podemos poner background-color del div en rojo con diferentes valores.

<style>
    /* 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);
    }
    
</style>

<body>
    <div class="div-1">
        <p>La background property puede tomar seis valores diferentes.</p>
    </div>

    <div class="div-2">
        <p>La background property puede tomar seis valores diferentes.</p>
    </div>

    <div class="div-3">
        <p>La background property puede tomar seis valores diferentes.</p>
    </div>
</body>

Ve que todas terminan con el mismo color de fondo.

Screen-Shot-2020-05-08-at-11.07.24-AM-1

Otros valores de la propiedad background-color puede tomar incluyen valor HSL,  valores de palabras  clave especiales y valores globales. Aqui hay 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;

Puedes leer más acerca de cada uno de estos valores aquí.

Nota Extra

Cuando colocas el elemento color de fondo, es importante asegurar que el contraste que contengan  color de fondo y el color del texto sea suficiente. Para asegurar que las personas con dificultades de vista puedan leerlo fácilmente.

Considera estos dos divs.

Screen-Shot-2020-05-08-at-11.11.44-AM-1

El contraste entre el color de fondo del primer div  y el color del texto no es suficiente para que todo mundo lo vea. Así que al menos que tu seas el único que use el sitio que estás construyendo y tengas muy buena vista evita usar tales combinaciones de color.

El segundo div tiene mucho mejor contraste  entre el color de fondo y el color del texto. Entonces, es más accesible y limpio para que otras personas puedan leerlo.

Conclusión

En este artículo, vimos como cambiar el background-color de un div. También hablamos que partes de CSS box model son afectadas por el cambio en background-color. Finalmente, hablamos de los valores que puede tomar la propiedad de background-color.

Espero que este artículo les haya sido de ayuda. Gracias por leer.


Traducido del artículo - HTML Background Color Tutorial – How to Change a Div Background Color, Explained with Code Examples por  Sarah Chima Atuonwu