Per un colore di sfondo semitrasparente semplice, le soluzioni di cui sopra (immagini CSS3 o bg) sono le opzioni migliori. Tuttavia, se vuoi fare qualcosa di più elaborato (ad es. Animazione, più sfondi, ecc.) O se non vuoi fare affidamento su CSS3, puoi provare la "tecnica del riquadro":
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
}
.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}
.pane > .cont {
position: relative;
z-index: 10;
}
<p class="pane">
<span class="back" style="background-color: green; opacity: 0.6;"></span>
<span class="cont" style="color: white;">Hello world</span>
</p>
La tecnica funziona utilizzando due "livelli" all'interno dell'elemento riquadro esterno:
- uno (il "retro") che si adatta alla dimensione dell'elemento del riquadro senza influire sul flusso del contenuto,
- e uno (il "cont") che contiene il contenuto e aiuta a determinare la dimensione del riquadro.
Il position: relativeriquadro on è importante; indica al livello posteriore di adattarsi alle dimensioni del riquadro. (Se è necessario che il <p>tag sia assoluto, modificare il riquadro da a <p>a a <span>e racchiuderlo in un <p>tag di posizione assoluta .)
Il vantaggio principale che questa tecnica ha su quelli simili sopra elencati è che il riquadro non deve avere una dimensione specificata; come sopra codificato, si adatta a tutta la larghezza (layout normale degli elementi a blocchi) e solo fino al contenuto. L'elemento del riquadro esterno può essere ridimensionato come preferisci, purché sia rettangolare (vale a dire che il blocco in linea funzionerà, il non in linea normale non funzionerà).
Inoltre, ti dà molta libertà per lo sfondo; sei libero di inserire qualsiasi cosa nell'elemento posteriore e di non influire sul flusso di contenuti (se desideri più sottostrati a dimensione intera, assicurati che abbiano anche la posizione: assoluta, larghezza / altezza: 100%, e in alto / in basso / a sinistra / a destra: auto).
Una variante per consentire la regolazione dell'inserzione di sfondo (tramite in alto / in basso / a sinistra / a destra) e / o il pinning di sfondo (rimuovendo una delle coppie a sinistra / a destra o in alto / in basso) è invece utilizzare il seguente CSS:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
Come scritto, questo funziona in Firefox, Safari, Chrome, IE8 + e Opera, sebbene IE7 e IE6 richiedano CSS ed espressioni extra, IIRC e l'ultima volta che ho controllato, la seconda variante CSS non funziona in Opera.
Cose a cui prestare attenzione:
- Gli elementi mobili all'interno del livello cont non saranno contenuti. Dovrai assicurarti che siano cancellati o altrimenti contenuti, o scivoleranno fuori dal fondo.
- I margini vanno sull'elemento del riquadro e il riempimento sull'elemento cont. Non usare il contrario (margini sul cont o padding nel riquadro) o scoprirai stranezze come la pagina essendo sempre leggermente più ampia della finestra del browser.
- Come accennato, il tutto deve essere blocco o blocco in linea. Sentiti libero di usare
<div>s invece di <span>s per semplificare il tuo CSS.
Una demo più completa, che mostra la flessibilità di questa tecnica usandola in tandem con display: inline-block, e con entrambi autoe specifici widths / min-heights:
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
width: 175px; min-height: 100px;
margin: 8px;
}
.pane > .back {
position: absolute; z-index: 1;
width: auto; height: auto;
top: 8px; bottom: 8px; left: 8px; right: 8px;
}
.pane > .cont {
position: relative; z-index: 10;
}
.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
Ed ecco una demo live della tecnica ampiamente utilizzata:
