Il grande problema della proprietà opacity dei css3 è che ti rende semi trasparente l'intero contenuto, non solo lo sfondo. Secondo me è una grave lacuna, così mi sto ingegnando per trovare delle soluzioni.
Eccone una.
Dato un contenitore qualsiasi e del contenuto:
<div id="cont">
<h2>Titolo</h2>
Testo testo testo testo</p>
</div>
Inserisco uno sfondo con la speudo-classe :before in posizione assoluta:
#cont{
position: relative;
z-index: 1;
color: white;
width: 400px;}
#cont:before{
content: ".";
z-index: -1;
background:black;
position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
overflow: hidden;
text-indent: -3000px;}
Ed ottengo uno sfondo grande quanto il contenitore, perfettamente manipolabile e che soprattutto non aggiunge codice inutile all'html.
Vi pare una soluzione adottabile? Ci vedete dei problemi? Compatibilità?
Rispondi quotando
