Opacity css cross browser

Opacizzare un contenuto Quante volte ti è capitato di dover realizzare un div il cui background-color avesse un opacità diversa […]
Opacity css cross browser

Opacizzare un contenuto

Quante volte ti è capitato di dover realizzare un div il cui background-color avesse un opacità diversa da 100? Quanti dubbi o difficoltà hai incontrato durante la realizazione per renderlo il più possibile retrocompatibile o cross browser? Oggi vogliamo proporvi una soluzione che, con l’aiuto di jquery e poche riche di html e css risolverà facilmente il problema.

Il codice necessario

Il div che verrà reso trasparente è #overlay, posizionato in assoluto sopra #container_box.

<div id="container_box">
    <div id="overlay"></div>
    <!-- Contenuto di esempio inserito in un iframe per mostrare la trasparenza del div#overlay -->
    <iframe src="http://www.laboratoriocss.it/index.php" scrolling="no" width="400" height="400" frameborder="0"></iframe>
    <!-- Fine contenuto di esempio -->
</div> 

Il relativo codice css che ci permette di attribuire un colore di sfondo e di posizionarlo in assoluto rispetto al suo contenitore è il seguente. Potrete modificare qualsiasi cosa del seguente stile in base alle vostre esigenze.

#container_box{
	width:400px;
	height:400px;
	position:relative;
	border:3px solid #ccc;
	margin:0 auto;
}

#overlay{
	position:absolute;
	width:400px;
	height:100px;
	background:#000;
	left:0;
	bottom:0;
}

Il javascript

L’ultimo tassello mancante è proprio javascript. Posizioniamoci nell’head e inseriamo queste righe di codice. La prima inclusione è necessaria per importare le librerie di jquery e richiamare le funzioni del framework. Le successive istruzioni rendono visibile il div e impostano la proprietà opacity: 0.8 che renderà il div#overlay in trasparenza su qualsiasi browser e versione.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#overlay').show();
	$("#overlay").css({ opacity: 0.8 });
});
</script>

jQuery provvederà ad inserire in maniera dinamica e autonoma le proprietà css compatibili con il browser che si sta utilizzando in quel momento. Nel caso di mozilla quindi verrà creato uno stile inline ad-hoc opacity: 0.8 – mentre nel caso di internet explorer ad esempio la proprietà opacity verrà renderizzata come filter:alpha(opacity=80);

jQuery risulta essere quindi un ottimo, veloce ed efficace strumento, che se utilizzato in maniera opportuna può far risparmiare allo sviluppatore tempo e denaro.

Importante

Ricordate che qualsiasi elemento figlio inserito in un div che abbia impostata la proprietà opacity ereditererà quel valore. Un testo, un immagine e qualsiasi altro contenuto verrà visualizzato con l’opacità dell’elemento padre (fin quando si tratta di testi può anche andare bene). Il metodo più pulito per ovviare a questo inconveniente è di non utilizzare la proprietà opacity ma ricorrere alla famosa immagine in formato gif 1px * 1px ripetuta sulle x e y. La gif simulerà l’opacità del div e la percentuale di opacità la sceglierete voi in photoshop al momento della creazione.

Provalo subito

Prova la demo Consulta il codice
  • Utile come suggerimento così siamo sicuri che funziona su tutti i browser.

  • Daniele

    Ciao Stefano!
    Intanto complimenti per l’articolo 😎
    vorrei chiederti dato che non ho capito bene, cosa intendi esattamente quando dici di usare l'”immagine in formato gif 1px * 1px ripetuta sulle x e y”?
    Grazie!

  • Ciao Daniele
    La proprietà opacity agisce in maniera ereditaria sui children dell’elemento principale a cui viene applicata. Se per caso dovessero esserci testi o immagini anche loro verrebbero opacizzati. Un’alternativa all’opacity e all’RGBA(supportato solo dalle ultime versioni dei browser) potrebbe essere quella di creare una piccola immagine in gif o png (opacizzata in photoshop) da usare come background di quello stesso elemento con valore settato su “repeat” (che è quello di default e puoi anche non specificarlo) per far si che la piccola immagine che hai creato possa ripetersi per tutta la superficie dell’elemento a cui la proprietà viene applicata.

    div {
    background: url(“sfondo.png”) repeat left top;
    }

    L’immagine viene ripetuta per tutta la superficie del div cosi da creare un effetto di opacità.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github