Teksta rakstīšana (ar daļēji caurspīdīgu fonu) pār attēlu

Efektu, kas ir diezgan izplatīta, lai redzētu vietnes un blogi nākamo paaudzi, ir rakstīti tā saucamās pārklājuma pār attēliem, ko bieži pavada tumša caurspīdīgu fonu. Lūk, piemērs:

Šajā rakstā mēs pārrakstīšanu mūsu attēlus, izmantojot CSS.

Pirmais, kas jādara, ir izveidot HTML struktūru, piemēram, šo:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> saulrietu </ span>!



  



 </ Div>







 </ Div>

Kā jūs varat redzēt, es izveidojis DIV traukā (ar klasi ". Boximg"), par kuru es pozīcija savu tēlu un jaunu div (ar klasi ". Boxtesto"), kas savukārt satur span kas iezīmē tekstu, kuru vēlaties pieteikties .

Ļaujiet mums tagad redz CSS, ka būtiski, darba vietā:

 . Boximg {



  



 pozīcija: radinieku;



  



 platums: 400px; / * Tāds pats platums attēlu * /



  



 augstums: 300px; / * pats attēls augstums * /







 }







 {Div.boxtesto



  



 position: absolūtas;



  



 apakšā: 0px;



  



 left: 0px;



  



 platums: 100%;



  



 background: rgb (0, 0, 0);



  



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







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



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



  



 vēstuļu solis:-1px;







 }

Uzglabāšanas kaste (". Boximg") ir tāda paša izmēra un relatīvās pozicionēšanas ar attēlu, kas ir paredzēts, lai pielāgotos.
Uzglabāšanas kaste ar tekstu (". Boxtesto") ir mūsu darba uzmanības centrā ir absolūta pozicionēšanu, kas izņemta no normālo plūsmu elementi un vai tas novietots kreisajā apakšējā stūrī tās iepakojumu un, protams, ir platums līdz 100% kas aizņem visu pieejamo telpu horizontāli. Interesanti, tad divi no fona definīcijām, rgb un rgba, kas kalpo, lai noteiktu tumša fona un daļēji caurspīdīgas.
Posmu. "Teksts", beidzot, ir vienīgais mērķis, lai Stylize tekstu un piemērot nedaudz "polsterējums.

• <<
• 1
• 2
• >>