Compito precedente
Sfondi10/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

Formato PNG-24

PNG-24 è un formato eccellente. È adatto per schemi, disegni, grafici, testo e immagini multicolori complesse, poiché supporta un numero quasi illimitato di colori.

Nelle foto, di solito è inferiore al JPEG in termini di dimensioni del file, ma superiore in termini di qualità dell'immagine. Ma a volte la differenza di dimensioni dei file è talmente acritica che si può usare il PNG.

Il vantaggio più importante di PNG-24 è il pieno supporto della traslucenza, che non è disponibile in nessun altro formato. Pertanto, non c'è alternativa a PNG-24 nello sviluppo web quando si progettano sfondi complessi, elementi grafici con ombre complesse e così via.

Confrontate il gattino in PNG-8 del compito precedente e il gattino in PNG-24 di questo compito. In particolare, come appaiono i loro bordi sul blocco giallo e sul blocco sfumato.

È sempre possibile utilizzare PNG-24 anziché PNG-8.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <title>Formato PNG-24</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box box1"> <div class="block"></div> </div> <div class="box box2"> <div class="block"></div> </div> <div class="box box3"> <div class="block"></div> </div> </body> </html>
CSS
.box { width: 300px; height: 140px; margin: 20px auto; box-shadow: 1px 1px 3px #999999; } .box1 { background-color: #2ecc71; } .box2 { background-color: #f1c40f; } .box3 { background-image: linear-gradient(to bottom, #2ecc71, #f1c40f); } .block { height: 134px; background-repeat: no-repeat; background-position: 50% 50%; }

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
    1. Impostare gli elementi con classe block in modo che abbiano un'immagine di sfondo cat_cage.png.

    © 2023-2024, codegym.study