Ejercicio 15 — Propiedades de Fondo en CSS

En este ejercicio se exploran las diferentes formas de aplicar fondos en CSS: colores sólidos, imágenes, gradientes, fondos múltiples y el uso de transparencia con RGBA. Se completa el código base con los valores indicados en los comentarios y se analiza cómo se comportan visualmente los distintos tipos de fondo al redimensionar la ventana.

Código HTML y CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio de Propiedades de Fondo CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        .box {
            height: 250px;
            margin-bottom: 30px;
            border: 1px solid #333;
            padding: 20px;
            color: black;
            font-size: 1.5em;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 1. Color Sólido */
        .color-box {
            background-color: #3498db; 
        }

        /* 2. Imagen de Fondo */
        .image-box {
            background-image: url('https://picsum.photos/id/237/200/300');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        /* 3. Gradiente */
        .gradient-box {
            background-image: linear-gradient(to right, #007bff, #28a745);
        }

        /* 4. Fondo Múltiple */
        .multiple-box {
            background-image: 
                linear-gradient(rgba(66, 207, 22, 0.5), rgba(164, 219, 11, 0.5)),
                url('https://picsum.photos/id/200/400/200');
            background-size: cover;
            color: white;
        }

        /* 5. Opacidad con RGBA */
        .text-box {
            color: #ffc107;
            background-color: rgba(206, 9, 9, 0.5);
        }
    </style>
</head>
<body>

    <h1>Propiedades de Fondo en CSS</h1>

    <div class="box color-box">
        1. Color Sólido (background-color)
    </div>

    <div class="box image-box">
        2. Imagen de Fondo (background-image, -repeat, -size, -position)
    </div>

    <div class="box gradient-box">
        3. Gradiente (linear-gradient)
    </div>

    <div class="box multiple-box">
        4. Fondo Múltiple (Gradiente y Imagen)
    </div>
    
    <div class="box text-box">
        5. Opacidad con RGBA (background-color: rgba)
    </div>

</body>
</html>

🚀 Ver resultado del ejercicio