Brainleaf
Web Resources

Capita a volte di voler inserire in un div una trasparenza ed accorgersi che senza alcuni dovuti accorgimenti, questa proprietà si trasmetterà a tutti gli elementi child contenuti all'interno di quel div. In questo articolo spiegheremo come ovviare a tale problema. Il metodo comunemente usato per inserire una trasparenza è attraverso la proprietà opacity e un filter per il noiosissimo MS Explorer.

 

Opacità div con proprietà ereditata dagli elementi child

#nomediv  {
    background: #999;

    /* Valido per Mozilla, Opera, Safari, Chrome */
    opacity: 0.6;

    /* Valido per gli antichi MS Explorer  5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);

    /* Valido per MS Explorer 8 e successivi */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

Il codice in questione non permette però di lasciare inalterati i contenuti del div al quale stiamo applicando queste proprietà. Ne viene quindi che se inseriremo del testo o un'immagine al suo interno, anche questi verranno opacizzati come il div contenitore.

C'è però un modo di aggirare l'ostacolo, inserendo il colore background e il grado di opacità utilizzando dei valori RGB più la trasparenza. Ovviamente, come ormai il mondo del web ci ha abituati, non tutti i browser supportano questa tecnica, per la quale vedremo poi una soluzione ad hoc.

Facciamo quindi un'esempio pratico: assegnamo ad un div un background di colore nero con un grado di trasparenza del 50%.

#nomediv  {
    background: rgba(0, 0, 0, 0.5);
}

N.B.: Per i browser che non supportano la trasparenza RGB è bene esprimere il colore di sfondo senza appunto il valore alpha.

#nomediv  {
    background: rgba(0, 0, 0, 0.5);
    background: rgb(0, 0, 0);
}

Come è intuibile dall'esempio la sintassi per esprimere un colore in RGB è quindi:

rgb(red[valori da 0 a 255], green[valori da 0 a 255], blu[valori da 0 a 255]);

Per inserire anche il canale alpha sarà quindi sufficiente modificare la dicitura rgb con rgba e inserire come ultimo valore il livello di trasparenza espresso in una scala di valori che va da 0 a 1. Per una trasparenza del 50% il valore da inserire è quindi 0.5

E MS-Explorer?

Come c'era da aspettarsi, quel vecchio rompiscatole di Explorer non poteva che dare problemi. Ecco quindi una soluzione che ci permetterà però di ottenere lo stesso risultato senza l'uso dei valori RGB. In questo caso il colore e la trasparenza vengono espressi attraverso valori esadecimali. Al contrario del sistema rgb in questo caso le prime due cifre stanno a rappresentare il grado di trasparenza (in una scala da 0 a 9) mentre le restanti sei cifre rappresentano il colore di partenza.

#nomediv  {
   /* Per Explorer 5/7 */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
   /* Per Explorer 8 e successivi  */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)";
}

Non resta quindi che unire il tutto e ottenere un codice letto dai principali browser che ci permetterà di assegnare un valore di opacità ad un div senza che questa proprietà venga ereditata dagli elementi child.

Opacità div con proprietà NON ereditata dagli elementi child

#nomediv  {
    background: rgba(0, 0, 0, 0.5); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)";
}

Se volete, dal pannello sottostante sarà possibile generare direttamente il codice necessario per i filtri di Exolorer 5->8.

Make your Filter

Explorer Opacity Filter Generator



Inserisci i dati nel form

Joomla SEF URLs by Artio