Compito precedente
Sfondi12/14
Torna all'elenco delle attività
  1. 1. Proprietà background-color
  2. 2. Proprietà background-image
  3. 3. Proprietà background-repeat
  4. 4. Proprietà background-position
  5. 5. Ancora un po' di background-position
  6. 6. Proprietà background-attachment
  7. 7. Proprietà background
  8. 8. Formato JPEG
  9. 9. Formato PNG-8
  10. 10. Formato PNG-24
  11. 11. Formato GIF
  12. 12. Elementi annidati con sfondi
  13. 13. Effetti con sfondi ripetuti
  14. 14. Sprites
Compito successivo
  • Corsi
  • Registrazione
  • Accedi

Caricamento...
In pochi secondi sarà pronto.

  • Teoria
  • Teoria

Elementi annidati con sfondi

Se una pagina ha più elementi annidati l'uno nell'altro, le immagini di sfondo di questi blocchi si sovrapporranno l'una all'altra.

Lo sfondo dell'unità esterna sarà in basso, mentre gli sfondi delle unità interne saranno in alto. Più l'elemento è profondo, più il suo sfondo sarà alto.

Diamo un'occhiata a come si presenta.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <title>Elementi annidati con sfondi</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block1"> <div class="block2"> <div class="block3"></div> </div> </div> </body> </html>
CSS
body { padding-top: 80px; } .block1 { width: 256px; margin: 0 auto; box-shadow: 1px 1px 3px #999999; } .block2 { } .block3 { height: 256px; }

Il codice è cambiato, fai clic su "Aggiorna" o attiva l'esecuzione automatica.

Sei passato a un'altra pagina

Fare clic all'interno del mini-browser per evidenziare questa finestra.

100%
ObiettiviFatto
0

    Assemblare la miniatura di un gatto in una fattoria. Impostare immagini di sfondo non ripetitive:

    1. cows.jpg al primo blocco,
    2. cat_walk.png al secondo blocco, posizione di sfondo 190px 195px,
    3. fence.png al terzo blocco.

    © 2023-2024, codegym.study