Colores y fondo en CSS, atributos y propiedades

5. Colores y fondo en CSS
En esta sección veremos las propiedades de los colores y los fondos en CSS.
5.1. Valores de los colores
Los valores de los colores se pueden definir de varias formas:
- Nombre predefinido: red, yellow, blue, green…
- Código hexadecimal: #RRGGBB o #RRGGBBAA
- RGB: Red, Green, Blue
- RGBA: Red, Green, Blue, Alpha
- HSL: Hue, Saturation, Lightness
- HSLA: Hue, Saturation, Lightness, Alpha
En nuestro caso, vamos a utilizar los valores definidos por su nombre, código hexadecimal y RGB o RGBA. El resto de valores no se van a utilizar.
5.2. Tabla de colores básicos
HTML soporta alrededor de 140 nombres de colores diferentes. Entre ellos puedes encontrar los siguientes colores básicos:
Color | Nombre | HEX | RGB |
---|---|---|---|
black | #000000 | 0,0,0 | |
white | #ffffff | 255,255,255 | |
red | #ff0000 | 255,0,0 | |
blue | #0000ff | 0,0,255 | |
yellow | #ffff00 | 255,255,0 | |
gray | #808080 | 128,128,128 | |
green | #008000 | 0,128,0 |
Ejemplo de colores en hexadecimal con transparencia:
0
5.3. Propiedades más utilizadas
Algunas de las propiedades CSS relacionadas con el color y el fondo más utilizadas son las siguientes:
Propiedad | Descripción | Valores |
---|---|---|
color | Color del texto | RGB | HSL | HEX | nombre del color | RGBA | HSLA |
background-color | Color de fondo | RGB | HSL | HEX | nombre del color | RGBA | HSLA | transparent |
background-image | Imagen de fondo | url(«…») | none |
background-repeat | Repetición de la imagen de fondo | repeat | repeat-x | repeat-y | no-repeat |
background-attachment | Desplazamiento de la imagen de fondo | scroll | fixed |
background-position | Posición de la imagen de fondo | percentage | length | left | center | right |
background-size | Tamaño de la imagen de fondo | auto | cover | contain | valor |
Opacity | Transparencia de un elemento | [ 0 – 1 ] (0 → totalmente transparente) |
5.3.1. color
– Color del texto
La propiedad color
se utiliza para definir el color del texto en un elemento HTML.
Ejemplo:
css p { color: #FF0000; /* Color rojo en formato HEX */ }
5.3.2. background-color
– Color de fondo
La propiedad background-color
se utiliza para establecer el color de fondo de un elemento HTML, como un div o una sección.
Ejemplo:
div { background-color: rgb(0, 128, 255); /* Color de fondo azul en formato RGB */ }
Ejercicio propuesto background-color
Observa el resultado de los siguientes estilos y estudia las diferencias que hay entre los distintos valores definidos.
.a { background-color: red; } .b { background-color: #FF0000; } .c { background-color: RGB(255,0,0); } .d { background-color: HSL(0,100%,50%); } .e { background-color: red; opacity: 0.5; } .f { background-color: rgba(255, 0, 0, 0.5); } .g { background-color: transparent; }
0
5.3.3. background-image
– Imagen de fondo
La propiedad background-image
se utiliza para establecer una imagen como fondo de un elemento HTML. Puedes proporcionar la ruta de la imagen usando el formato url("...")
. El valor none
se utiliza para eliminar cualquier imagen de fondo.
Ejemplo:
section { background-image: url("imagen-fondo.jpg"); }
Ejercicio propuesto background-image
Agrega los siguientes estilos en una página web y explica las diferencias que hay entre ellos:
body { background-image: url("https://bit.ly/2slA7jo");} body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat-x;} body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat-y;} body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat;} body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat;} body { background-image: url("https://bit.ly/2slA7jo"); background-size: 100px 100px;}
dark
5.3.4. background-repeat
– Repetición de la imagen de fondo
La propiedad background-repeat
controla la forma en que la imagen de fondo se repite en el elemento. Puedes elegir entre repeat
(repetir en ambas direcciones), repeat-x
(repetir solo horizontalmente), repeat-y
(repetir solo verticalmente) y no-repeat
(no repetir la imagen).
Ejemplo:
header { background-image: url("patron-fondo.png"); background-repeat: repeat-x; /* Repetir solo horizontalmente */ }
Ejercicio propuesto background-repeat
La propiedad background-attachment indica si una imagen se mantiene fija o se desplaza con el resto de la página. Explica las diferencias que encuentras al establecer las siguientes propiedades:
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: fixed;} body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: scroll;}
dark
5.3.5. background-attachment
– Desplazamiento de la imagen de fondo
La propiedad background-attachment
controla si la imagen de fondo se desplaza con el contenido de la página (scroll
) o permanece fija en su posición mientras se desplaza el contenido (fixed
).
Ejemplo:
body { background-image: url("fondo-estrellado.jpg"); background-attachment: fixed; /* Fondo fijo en la ventana */ }
5.3.6. background-position
– Posición de la imagen de fondo
La propiedad background-position
se utiliza para definir la posición inicial de la imagen de fondo dentro del elemento.
Ejemplos:
Posición en el Centro Superior: Este ejemplo coloca la imagen de fondo en el centro superior del elemento.
div { background-image: url("imagen-fondo.jpg"); background-position: center top; }
Posición en la Esquina Superior Derecha: En este caso, la imagen de fondo se coloca en la esquina superior derecha del elemento.
div { background-image: url("imagen-fondo.jpg"); background-position: right top; }
Posición en la Esquina Inferior Izquierda: Aquí, la imagen de fondo se encuentra en la esquina inferior izquierda del elemento.
div { background-image: url("imagen-fondo.jpg"); background-position: left bottom; }
Posición Personalizada en Píxeles: Puedes especificar coordenadas en píxeles para posicionar la imagen de fondo de manera precisa.
div { background-image: url("imagen-fondo.jpg"); background-position: 50px 30px; /* 50px desde la izquierda, 30px desde arriba */ }
Posición en el Centro del Contenedor: Para centrar la imagen de fondo tanto vertical como horizontalmente en el contenedor.
div { background-image: url("imagen-fondo.jpg"); background-position: center center; }
Posición en Porcentajes: Puedes utilizar porcentajes para posicionar la imagen de fondo en relación con el tamaño del elemento.
div { background-image: url("imagen-fondo.jpg"); background-position: 25% 75%; /* 25% desde la izquierda, 75% desde arriba */ }
5.3.7. background-size
– Tamaño de la imagen de fondo
La propiedad background-size
se utiliza para controlar el tamaño de la imagen de fondo en relación con el elemento que la contiene. La sintaxis de la propiedad background-size
es la siguiente:
background-size: valor;
Donde «valor» puede ser uno de los siguientes:
auto
: Este es el valor predeterminado. La imagen de fondo conserva su tamaño original y se repite si es necesario para llenar el contenedor.cover
: La imagen de fondo se escala para que cubra completamente el contenedor, recortando cualquier exceso que no quepa. Esto puede dar como resultado que la imagen se estire o recorte.contain
: La imagen de fondo se escala para que quepa completamente dentro del contenedor sin recortarla. Puede haber espacio vacío alrededor de la imagen si el contenedor tiene una relación de aspecto diferente a la imagen.valor personalizado
: Puedes especificar el tamaño de la imagen de fondo utilizando valores de longitud (píxeles, em, porcentaje) o usandoauto
para una de las dimensiones (ancho o alto) y un valor específico para la otra dimensión.
Ejemplos:
/* La imagen se ajusta para cubrir completamente el contenedor */ background-size: cover; /* La imagen se ajusta para caber completamente dentro del contenedor */ background-size: contain; /* La imagen tiene un ancho fijo de 200px y se ajusta automáticamente en altura */ background-size: 200px auto; /* La imagen tiene un ancho fijo del 50% del contenedor y una altura fija de 100px */ background-size: 50% 100px;
La propiedad background-size
es especialmente útil cuando se trabaja con imágenes de fondo en elementos como encabezados, secciones, divs, etc., y se desea controlar cómo se ajusta la imagen de fondo en relación con el tamaño del contenedor.
5.3.8. opacity
– Opacidad del Elemento
La propiedad opacity
se utiliza para controlar la transparencia de un elemento. Un valor de 1
representa opacidad completa (sin transparencia), mientras que un valor de 0
hace que el elemento sea completamente transparente. Los valores entre 0
y 1
permiten un grado variable de transparencia.
Ejemplo:
.caja-transparente { background-color: #000; /* Fondo negro */ opacity: 0.7; /* 70% de opacidad */ }
5.4. Ejemplo práctico
Este ejemplo representa un típico Call to Action con un contenedor con una imagen de fondo que invita a los usuarios a realizar una acción específica, como comprar un producto o suscribirse a un servicio.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Call to Action</title> <style> *{font-family: Arial;} .cta-container { background-image: url("cta-background.jpg"); /* Imagen de fondo */ background-size: cover; /* Cubre completamente el contenedor */ background-position: center center; /* Centra la imagen */ background-repeat: no-repeat; /* No se repite la imagen de fondo */ background-attachment: fixed; /* Fondo fijo en la ventana */ opacity: 0.9; /* Opacidad del contenedor */ text-align: center; /* Alineación del contenido al centro */ padding: 60px; } .cta-text { font-size: 24px; } .cta-button { background-color: #FF5733; /* Color de fondo del botón */ color: #fff; /* Color del texto del botón en blanco */ padding: 10px 20px; /* Relleno del botón */ border: none; /* Sin borde */ border-radius: 5px; /* Bordes redondeados */ font-size: 18px; cursor: pointer; /* Cambio de cursor al pasar el ratón */ } </style> </head> <body> <div class="cta-container"> <h2 class="cta-text">¡Descubre nuestro producto estrella!</h2> <p class="cta-text">Obtén un 20% de descuento en tu primera compra.</p> <button class="cta-button">Comprar Ahora</button> </div> </body> </html>
En este ejemplo, hemos creado un contenedor de llamada a la acción (cta-container
) con una imagen de fondo (cta-background.jpg
). A continuación, se aplican las siguientes propiedades:
background-size: cover
: Hace que la imagen de fondo cubra completamente el contenedor.background-position: center center
: Centra la imagen de fondo vertical y horizontalmente.background-repeat: no-repeat
: Evita que la imagen de fondo se repita.background-attachment: fixed
: Fija el fondo en la ventana, lo que crea un efecto de parallax o paralaje.opacity: 0.9
: Aplica una opacidad del 90% al contenedor, haciendo que la imagen de fondo sea ligeramente visible a través del contenido.
El texto dentro del contenedor (cta-text
) se centra en el centro del contenedor. El botón de llamada a la acción (cta-button
) tiene un color de fondo, un color de texto en blanco, bordes redondeados y un cambio de color al pasar el ratón.
Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones
0
Veamos otro ejemplo de Call to Action. En este caso no vamos a usar la propiedad background-attachment: fixed
. Como puedes ver, en este ejemplo, no se aprecia el efecto de paralaje, ya que la imagen no queda fija en el fondo y se desplaza junto con el contenedor.
.hero-image { background-image: url("https://www.eniun.com/wp-content/uploads/eniun-home-historia.jpg"); height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }
Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones
0
Test