6 – Immagini, sfondi e media
1. Proprietà background
CSS consente di gestire lo sfondo di un elemento tramite varie proprietà.
1.1 Colore di sfondo
div {
background-color: #f2f2f2; /* colore chiaro */
}
1.2 Immagine di sfondo
div {
background-image: url('immagine.jpg');
background-repeat: no-repeat; /* evita ripetizioni */
background-position: center; /* centro della cella */
background-size: cover; /* copre tutta l’area del box */
}
1.3 Gradiente
-
Lineare:
div {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
-
Radiale:
div {
background: radial-gradient(circle, #6a11cb, #2575fc);
}
2. Controllo sulle immagini
2.1 Object-fit
Determina come un’immagine si adatta all’elemento contenitore:
| Valore | Funzione |
|---|---|
| fill | Riempie tutto lo spazio, distorcendo se necessario |
| contain | Si adatta senza ritagliare |
| cover | Riempie senza distorsione, ritagliando se necessario |
| none | Mantiene dimensioni originali |
| scale-down | Scala verso il basso se necessario |
Esempio
img {
width: 300px;
height: 200px;
object-fit: cover;
border-radius: 8px;
}
2.2 Background-size
-
Controlla la dimensione dell’immagine di sfondo:
div {
background-size: cover; /* copre tutta l’area */
background-size: contain; /* tutta l’immagine visibile */
}
3. Icone e SVG
3.1 Icone
-
Possono essere inserite come immagini (
<img>) o tramite librerie tipo Font Awesome.
<i class="fas fa-home"></i>
3.2 SVG
-
Immagini vettoriali scalabili:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
-
Vantaggi: scalabilità senza perdita di qualità e controllo tramite CSS.
4. Esercizio svolto: galleria fotografica con hover effect
Obiettivo
Creare una galleria di immagini che cambia stile al passaggio del mouse (hover).
HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Galleria CSS</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="gallery">
<div class="photo"><img src="https://via.placeholder.com/300x200" alt="Foto 1"></div>
<div class="photo"><img src="https://via.placeholder.com/300x200" alt="Foto 2"></div>
<div class="photo"><img src="https://via.placeholder.com/300x200" alt="Foto 3"></div>
</div>
</body>
</html>
CSS (stile.css)
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
padding: 50px;
}
.gallery {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.photo {
overflow: hidden;
border-radius: 10px;
}
.photo img {
width: 300px;
height: 200px;
object-fit: cover;
transition: transform 0.3s, filter 0.3s; /* animazione hover */
}
.photo img:hover {
transform: scale(1.1); /* ingrandimento */
filter: brightness(80%); /* scurisce leggermente */
}
Risultato
-
Tre immagini affiancate, con spaziatura uniforme.
-
Effetto zoom e darken al passaggio del mouse.
-
Immagini adattate al contenitore grazie a
object-fit: cover. -
Design responsive e moderno.
