Combinar Múltiples Propiedades de Fondo
En este paso, aprenderá a combinar múltiples propiedades de fondo para crear diseños de fondo más complejos e interesantes. Modificaremos el archivo styles.html en el directorio ~/project para demostrar técnicas avanzadas de estilo de fondo.
Actualice el archivo styles.html con el siguiente contenido:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Múltiples Propiedades de Fondo</title>
<style>
.image-container {
width: 600px;
height: 400px;
border: 2px solid black;
margin: 20px;
color: white;
font-weight: bold;
padding: 20px;
}
.multiple-backgrounds {
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("background-sample.jpg");
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.layered-backgrounds {
background-image:
url("small-pattern.jpg"), linear-gradient(to right, #ff6b6b, #4ecdc4);
background-size:
100px 100px,
cover;
background-position:
top left,
center;
background-repeat: repeat, no-repeat;
}
</style>
</head>
<body>
<div class="image-container multiple-backgrounds">
Fondo de Superposición con Imagen
</div>
<div class="image-container layered-backgrounds">
Fondo en Capas con Patrón y Degradado
</div>
</body>
</html>
small-pattern.jpg se encuentra en el directorio ~/project.
Este ejemplo demuestra dos técnicas avanzadas de fondo:
-
Múltiples Fondos con Superposición:
- Utiliza un degradado lineal para crear una superposición semitransparente
- Combina el degradado con una imagen de fondo
- Aplica tamaño, posicionamiento y repetición consistentes
-
Fondos en Capas:
- Combina una imagen de patrón repetitivo con un degradado lineal
- Utiliza diferentes tamaños y posicionamientos para cada capa de fondo
Cuando abra este archivo HTML en un navegador, verá cómo múltiples propiedades de fondo pueden crear diseños complejos y visualmente interesantes.
