Písanie textu (s čiastočne priehľadným pozadím) na obrázok

Účinok, ktorý je úplne bežné vidieť stránky a blogy budúcej generácie, sú písané v tzv overlay cez obrazy, často sprevádzané tmavými priesvitné pozadie. Tu je príklad:

V tomto článku sme sa, aby prepísanie našich obrázkov pomocou CSS.

Prvá vec, ktorú urobiť, je vytvoriť štruktúru HTML, ako je tento:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> krásny západ slnka </ span>



  



 </ Div>







 </ Div>

Ako vidíte som vytvoril DIV nádoby (s triedou ". Boximg"), v ktorého poloha Aj moje image a nový div (vo svojej triede ". Boxtesto"), ktorý zase obsahuje rozpätie, ktoré označí text, ktorý chcete použiť .

Pozrime sa teraz vidieť, že CSS, vecne, na pracovisku:

 . Boximg {



  



 position: relative;



  



 šírka: 400px; / * rovnakej šírky obrázku * /



  



 výška: 300px; / * rovnakej výška obrázku * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 dole: 0px;



  



 Vľavo: 0px;



  



 Šírka: 100%;



  



 Súvislosti: rgb (0, 0, 0);



  



 Súvislosti: RGBA (0, 0, 0, 0,6);







 }







 {Span.testo



  



 padding: 10px;



  



 Farba: # FFFFFF;



  



 Písmo: tučné 24px/45px Helvetica, sans-serif;



  



 letter-spacing:-1px;







 }

Odkladacia schránka (". Boximg") má rovnakú veľkosť a umiestnenie vzhľadom k obrazu, ktorý je určený k.
Odkladacia schránka na text (". Boxtesto") je ťažisko našej práce je absolútna polohy, ktoré odstráni ju z normálneho toku prvkov a je umiestnený v ľavom dolnom rohu jeho obal a samozrejme má šírku až 100% zaberať celý priestor horizontálne. Zaujímavé, potom dve definície pozadia pomocou RGB a RGBA, ktoré slúžia na definovanie tmavé pozadie a semi-transparentné.
Rozpätie. "Text", konečne, je jediným účelom štylizovať text a použiť trochu "vypchávky.

• <<
• 1
• 2
• >>