Skriva text (med semi-transparent bakgrund) över en bild

En effekt som är ganska vanligt att se webbplatser och bloggar nästa generation, är skrivna i den så kallade overlay över bilderna, ofta tillsammans med en mörk genomskinlig bakgrund. Här är ett exempel:

I denna artikel kommer vi göra det skrivs över våra bilder med CSS.

Det första du bör göra är att skapa en HTML-struktur så här:

 <div class="boximg">



  



 <img border="0" src="tramonto.jpg"/>



  



 <div class="boxtesto">



    



 <span class="testo"> En vacker solnedgång! </ span>



  



 </ Div>







 </ Div>

Som ni ser jag skapat en DIV behållare (med klassen ". Boximg") inom vilken jag ställning min bild och en ny div (med klass ". Boxtesto") som i sin tur innehåller ett spann som markerar den text du vill använda .

Låt oss nu se CSS som, materiellt, arbetsplatsen:

 . Boximg {



  



 position: relativ;



  



 bredd: 400px; / * Samma bredd på bilden * /



  



 höjd: 300px; / * Samma bild höjd * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 bottom: 0px;



  



 vänster: 0px;



  



 bredd: 100%;



  



 Bakgrund: rgb (0, 0, 0);



  



 Bakgrund: RGBA (0, 0, 0, 0,6);







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



 font: bold 24px/45px Helvetica, sans-serif;



  



 Letter-avstånd:-1px;







 }

Den förvaringsbox (". Boximg") har samma storlek och relativ positionering till bilden som är avsedd för.
Lagringen låda av texten (". Boxtesto") är i fokus för vårt arbete har absolut positionering, vilket tar bort den från det normala flödet av element och är placerad i det nedre vänstra hörnet av dess behållare och uppenbarligen har en bredd till 100% att ockupera hela utrymmet horisontellt. Intressant, då de två definitionerna av bakgrunden med hjälp av RGB och RGBA som tjänar till att definiera den mörka bakgrunden och semi-transparent.
Spannet. "Text", slutligen, har det enda syftet att stilisera texten och tillämpa lite "stoppning.

• <<
• 1
• 2
• >>