Tekst invoeren (met semi-transparante achtergrond) over een afbeelding

Een effect dat is vrij gebruikelijk om sites en blogs de volgende generatie, zijn geschreven in de zogenaamde overlay over de beelden, vaak vergezeld van een donkere doorschijnende achtergrond te zien. Hier is een voorbeeld:

In dit artikel maken we het overschrijven van onze beelden met behulp van CSS.

Het eerste wat je moet doen is het creëren van een HTML-structuur zoals deze:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> Een mooie zonsondergang! </ span>



  



 </ DIV>







 </ DIV>

Zoals je kan zien heb ik een DIV container (met klasse ". Boximg") binnen, die ik plaats mijn beeld en een nieuwe div (met class ". Boxtesto"), die op zijn beurt bevat een span dat de tekst die u wilt toepassen merken .

Laten we nu de CSS die van materiële,, de werkplek te zien:

 . Boximg {



  



 position: relative;



  



 width: 400px; / * Zelfde breedte van het beeld * /



  



 height: 300px; / * De hetzelfde beeld hoogte * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 bottom: 0px;



  



 links: 0px;



  



 width: 100%;



  



 achtergrond: rgb (0, 0, 0);



  



 achtergrond: RGBA (0, 0, 0, 0.6);







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



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



  



 letter-spacing:-1px;







 }

De opbergbox (". Boximg") heeft dezelfde grootte en relatieve positionering naar de afbeelding die is bedoeld om tegemoet te komen.
De opbergbox van de tekst (". Boxtesto") is de focus van ons werk heeft absolute positionering, waarmee het niet langer de normale stroom van elementen en is gepositioneerd in de linkerbenedenhoek van de verpakking en uiteraard heeft een breedte van 100% om de gehele beschikbare ruimte horizontaal te bezetten. Interessant, dan, de twee definities van de achtergrond met behulp van RGB en RGBA die dienen om de donkere achtergrond te definiëren en semi-transparant.
De overspanning. "Tekst", ten slotte, heeft uitsluitend tot doel om de tekst te stileren en breng een beetje 'padding.

• <<
• 1
• 2
• >>