Le Immagini sono una delle colonne portanti per qualunque sito web; spesso sono utilizzate come sfondo per sezioni in cui, successivamente, si andrà ad inserire un testo (Titolo o paragrafo che sia); ci sono vari modi di unire un buon testo a belle immagini, di seguito un elenco:

  1. Testo direttamente sull’immagine, anche se così, sarà necessario avere uno sfondo che abbia abbastanza contrasto con il testo, altrimenti la leggibilità sarà minima (Esempio: con un testo bianco, si necessiterà di uno sfondo abbastanza scuro – Immagine con overlay nero).
  2. Overlay scuro/colorato/gradient tra immagine e testo, che, come detto al primo punto, permette di aumentare la leggibilità del testo;
  3. Creare un box sotto il testo, così che si possa leggere in tutti i modi;
  4. Usare un effetto BLUR sull’immagine, in questo modo avremo un effetto generale molto bello e che permette una buona leggibilità;

Overlay Sfondo

.darken {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(URL_IMMAGINE);
}

Box Dietro al testo

.text-box {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
display: inline;
padding: 10px;
}

Lascia una risposta