Color de fondo: background-color.

background-color es la propiedad de CSS que permite cambiar el color de fondo y sus valores son de tipo cadena, hexadecimal, RGB o RGBA.

Los valores de background-color funcionan exactamente igual que los de color por lo que no lo repetiremos, pero si quieres repasar puedes ir a la propiedad color.

El siguiente es un ejemplo sencillo del uso de la propiedad background-color en CSS:

<html>

   <head>

       <style type="text/css">

            .miEstilo {

                background-color:#A00;

                color:#FFF;

            }

        </style>

   </head>

   <body>

        <section>

                <p class="miEstilo">Texto de muestra</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Texto de muestra

Como se puede ver en las zonas resaltadas tenemos un parrafo con la clase miEstilo (<p class="miEstilo">) y un CSS que apunta a este con la propiedad background-color y el valor en hexadecimal #A00 (vinotinto). Adicionalmente le agregamos una propiedad color con valor blanco para que el texto se vea mejor.

Como se puede apreciar, la propiedad background-color funciona igual que la propiedad color. Ahora veamos cuando se utiliza RGBA para hacer un fondo con transparencia. Recuerda que el valor A (alpha) va del 0 al 1.

El siguiente es un ejemplo sencillo del uso de la propiedad background-color con valor RGBA en CSS, donde daremos a 3 parrafos el mismo color de fondo pero con diferente transparencia:

<html>

   <head>

       <style type="text/css">

            .miEstilo1 {

                background-color: rgba(100, 0, 0, 1);

                color:#FFF;

            }

            .miEstilo2 {

                background-color: rgba(100, 0, 0, 0.6);

                color:#FFF;

            }

            .miEstilo3 {

                background-color: rgba(100, 0, 0, 0.2);

                color:#FFF;

            }

        </style>

   </head>

   <body>

        <section>

                <p class="miEstilo1">Texto de muestra</p>

                <p class="miEstilo2">Texto de muestra</p>

                <p class="miEstilo3">Texto de muestra</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Texto de muestra 1

Texto de muestra 2

Texto de muestra 3

Como se puede ver en las zonas resaltadas tenemos tres parrafos con la clase miEstilo1 (<p class="miEstilo1">), miEstilo2 (<p class="miEstilo2">) y miEstilo3 (<p class="miEstilo3">) y un CSS que apunta a cada una con la propiedad background-color en color vinotinto, pero en el primero tenemos un alpha de 1 en el segundo de 0.6 y en el tercero de 0.2.

 

Conclusiones:

  • La propiedad background-color funciona prácticamente igual que la propiedad color y es una de las más utilizadas en diseño web.