Pisanje teksta (s polu-prozirnom pozadinom) preko slike

Efekt koji je sasvim uobičajeno vidjeti web stranice i blogove sljedeće generacije, zapisani su u tzv prekriti preko slika, često u pratnji tamne pozadine prozračan. Evo primjer:

U ovom članku ćemo napraviti prepisati naše slike koristeći CSS.

Prva stvar za učiniti je stvoriti HTML strukturu kao što je ovaj:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> prekrasnom zalasku sunca! </ span>



  



 </ Div>







 </ Div>

Kao što možete vidjeti sam stvorio DIV posudu (s klase ". Boximg") u kojem sam položaju moje slike i novi div (s klase ". Boxtesto") koja pak sadrži span koji označava tekst koji želite primijeniti .

Pogledajmo sada CSS da materijalno, na radnom mjestu:

 . Boximg {



  



 položaj: relativna;



  



 širina: 400px; / * Isto širinu slike * /



  



 visina: 300px; / * istu sliku visina * /







 }







 {Div.boxtesto



  



 položaj: apsolutni;



  



 dno: 0px;



  



 lijevo: 0px;



  



 Širina: 100%;



  



 Pozadina: RGB (0, 0, 0);



  



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







 }







 {Span.testo



  



 padding: 10px;



  



 Boja: # FFFFFF;



  



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



  



 pismo razmak:-1px;







 }

Spremišta (". Boximg") ima iste veličine i pozicioniranje u odnosu na sliku, koja je namijenjena za smještaj.
Skladištenje okvir teksta (". Boxtesto") je u fokusu našeg rada je apsolutno pozicioniranje, što ga uklanja iz normalan protok elemenata i nalazi se u donjem lijevom kutu spremnik i očito ima širinu 100% zauzeti cijeli raspoloživi prostor vodoravno. Zanimljivi, dakle, dvije definicije u pozadini pomoću RGB i rgba koji služe za definiranje tamne pozadine i polu-transparentni.
Vijek. "Tekst", napokon, jedina mu je svrha da stilizovati tekst i primijeniti malo "padding.

• <<
• 1
• 2
• >>