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.png"), 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">
Superponer fondo con imagen
</div>
<div class="image-container layered-backgrounds">
Fondo con capas de patrón y degradado
</div>
</body>
</html>
Primero, descargue una imagen de patrón pequeña:
wget https://labex.io/courses/images/small-pattern.png -O ~/project/small-pattern.png
Este ejemplo demuestra dos técnicas avanzadas de fondo:
-
Fondo múltiple con superposición:
- Utiliza un degradado lineal para crear una superposición semi-transparente
- Combina el degradado con una imagen de fondo
- Aplica dimensionamiento, posicionamiento y repetición consistentes
-
Fondos con capas:
- Combina una imagen de patrón repetitiva con un degradado lineal
- Utiliza dimensionamiento y posicionamiento diferentes 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 e interesantes visualmente.
