Text schreiben (mit semi-transparenten Hintergrund) auf ein Bild

Ein Effekt, der durchaus üblich, Websites und Blogs der nächsten Generation, sind in der sogenannten Overlay über die Bilder geschrieben, die oft durch eine dunkle durchscheinende Hintergrund begleitet sehen ist. Hier ein Beispiel:

In diesem Artikel stellen wir das Überschreiben der Bilder mit CSS.

Das erste, was zu tun ist, erstellen Sie eine HTML-Struktur wie folgt aus:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> Ein schöner Sonnenuntergang! </ span>



  



 </ Div>







 </ Div>

Wie Sie sehen können habe ich ein DIV-Container (mit Klasse ". Boximg"), innerhalb dessen positioniere ich mein Bild und ein neues div (mit Klasse ". Boxtesto"), die wiederum enthält eine span, dass der Text den Sie anwenden möchten Noten .

Lassen Sie uns nun die CSS, die materiell, am Arbeitsplatz:

 . Boximg {



  



 position: relative;



  



 width: 400px; / * Gleiche Breite des Bildes * /



  



 height: 300px; / * Das gleiche Bildhöhe * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 bottom: 0px;



  



 links: 0px;



  



 width: 100%;



  



 Hintergrund: rgb (0, 0, 0);



  



 Hintergrund: rgba (0, 0, 0, 0,6);







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



 font: bold 24px/45px Helvetica, Sans-Serif;



  



 letter-spacing:-1px;







 }

Die Aufbewahrungsbox (". Boximg") hat die gleiche Größe und die relative Positionierung, um das Bild, dass für die Unterbringung ist.
Die Aufbewahrungsbox des Textes (". Boxtesto") ist der Schwerpunkt unserer Arbeit ist die absolute Positionierung, die Sie entfernt aus dem normalen Fluss der Elemente und ist in der linken unteren Ecke des Containers positioniert und offensichtlich hat eine Breite von 100% die gesamte zur Verfügung stehende Raum horizontal zu besetzen. Interessant, dann sind die beiden Definitionen der Hintergrund mit RGB-und RGBA, die dem dunklen Hintergrund definieren und semi-transparent zu dienen.
Die Spanne. "Text", schließlich hat einzig den Zweck, den Text zu stilisieren und wenden ein wenig 'padding.

• <<
• 1
• 2
• >>