Simulare effetto su immagini tipo gazzetta.it

[Joker197cinque]

Da qualche tempo diversi siti, tra cui www.gazzetta.it, propongono immagini con sovrapposto il titolo dell'articolo con un grado di trasparenza.

Come si puo' fare con i CSS ?

Thx

[fcaldera]

posizioni un div al di sopra dell'immagine e gli dai come sfondo una .png semitrasparente ripetuta per tutto il blocco sovrapposto. Questa all'incirca la traccia da seguire

<div class="cntlancio">
   [img]...[/img]
   <div class="lancio">
       <div>
          <h1>Titolo</h1>
          

lorem ipsum... </p>
       </div>
   </div>
</div>



.cntlancio { 
   position : relative; 
   z-index : 1;
   width : 300px; 
}
.cntlancio .lancio { 
   position : absolute; 
   z-index : 1; 
   bottom : 0; 
   height   : 50px;
   width    : 100%;
}

.lancio div {
   position  : static;
   width     : 100%;
   height    : 100%;

   background : ... /* png semitrasparente */
   filter : ... /* png per Internet Explorer tramite activeX */ 
}

la presenza di un div supplementare non sarebbe necessaria se non fosse per un problema di IE sui link al di sopra di png di sfondo.