Impostare l’opacità al colore del background con css

In questo breve tutorial vi mostro come realizzare lo sfondo semi-trasparente, con i valori RGBA  utilizzando poche righe di codice css .

Valori di colore RGBA sono supportati in tutti i principali browser.

Un valore di colore RGBA viene specificato con: rgba (rosso, verde, blu). Ciascun parametro (rosso, verde, e blu) definisce l'intensità del colore e può essere un numero intero compreso tra 0 e 255 o un valore percentuale (da 0% a 100%).

Ad esempio, la (0,0,255) valore rgb è reso come blu, perché il parametro blu è impostato sul valore massimo (255) e gli altri sono impostati a 0.

Immaginiamo di voler applicare uno sfondo bianco semi  trasparente  al nostro div posto sopra ad un’immagine. Il codice rgb del bianco è il seguente:255,255,255 quindi il background del nostro div sarà cosi definito:

#box{
    background:rgba(255,255,255);
    width:300px;
    height:200px;
   }

il risultato sarà seguente:

nopa

Ora con una piccola modifica al valore rgba possiamo decidere l’intensità del colore dello sfondo: background:rgba(255,255,255,0.8); il valore 0.8 (80%) è il valore di riempimento dello sfondo che può essere variato a piacere e deve essre un valore compreso tra lo 0 e 1(0% e 100%)

#box{
    background:rgba(255,255,255,0.8);
    width:300px;
    height:200px;
   }

Risultato finale:

opa

Segnalibro e Share

Costantino Fusco

Sviluppatore di siti internet e di applicazioni web. Programmazione Web: PHP/MySQL HTML/CSS Ajax Javascript wordpress, Strategie SEO

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *