Psaní textu (s částečně průhledným pozadím) na obrázek

Účinek, který je zcela běžné vidět stránky a blogy příští generace, jsou psány v tzv. overlay přes obrazy, často doprovázené tmavými průsvitné pozadí. Zde je příklad:

V tomto článku jsme se, aby přepsání našich obrázků pomocí CSS.

První věc, kterou udělat, je vytvořit strukturu HTML, jako je tento:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> krásný západ slunce </ span>



  



 </ Div>







 </ Div>

Jak vidíte jsem vytvořil DIV nádoby (s třídou ". Boximg"), v jehož poloha I moje image a nový div (ve své třídě ". Boxtesto"), který zase obsahuje rozpětí, které označí text, který chcete použít .

Podívejme se nyní vidět, že CSS, věcně, na pracovišti:

 . Boximg {



  



 position: relative;



  



 šířka: 400px; / * stejné šířky obrázku * /



  



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







 }







 {Div.boxtesto



  



 position: absolute;



  



 dole: 0px;



  



 Vlevo: 0px;



  



 Šířka: 100%;



  



 Souvislosti: rgb (0, 0, 0);



  



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







 }







 {Span.testo



  



 padding: 10px;



  



 Barva: # FFFFFF;



  



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



  



 letter-spacing:-1px;







 }

Odkládací schránka (". Boximg") má stejnou velikost a umístění vzhledem k obrazu, který je určen k.
Odkládací schránka na text (". Boxtesto") je těžiště naší práce je absolutní polohy, které odstraní ji z normálního toku prvků a je umístěn v levém dolním rohu jeho obal a samozřejmě má šířku až 100% zabírat celý prostor horizontálně. Zajímavé, pak dvě definice pozadí pomocí RGB a RGBA, které slouží k definování tmavé pozadí a semi-transparentní.
Rozpětí. "Text", konečně, je jediným účelem stylizovat text a použít trochu "vycpávky.

• <<
• 1
• 2
• >>