Una delle ultime tendenze del web è l’utilizzo di sfondi semitrasparenti. Per ottenere questo effetto non è sempre necessario ricorrere alle PNG trasparenti ma è possibile anche tramite i fogli di stile.

La proprietà che andremo ad utilizzare è l’opacità, che è possibile impostare tramite il parametro opacity: 0.5. Il numero, variabile da 0.0 a 1.0, indica il grado di opacità, dove lo zero corrisponde alla trasparenza e l’uno alla piena visibilità. Per impostare quindi uno sfondo semitrasparente è possibile utilizzare questa proprietà associata ad un colore di fondo. Non possiamo tuttavia utilizzarla direttamente nell’elemento che vogliamo rendere semitrasparente, perché l’opacità influisce direttamente anche sul testo, a scapito della leggibilità. Per risolvere il problema sono sufficienti un paio di DIV in più.

Demo

Read more »