Scrierea textului (cu semi-transparent de fundal), peste o imagine

Un efect care este destul de comună pentru a vedea site-uri şi blog-uri de generaţie următoare, sunt scrise în aşa-numita suprapunere peste imagini, adesea insotite de un fundal întunecat translucid. Iată un exemplu:

In acest articol vom face suprascrierea imaginilor noastre folosind CSS.

Primul lucru pe care să faceţi este să creaţi o structura HTML ca aceasta:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> Un frumos apus de soare </ span>!



  



 </ Div>







 </ Div>

După cum puteţi vedea am creat un container DIV (cu clasa ". Boximg") în care poziţia I imaginea mea şi un div nou (cu clasa "Boxtesto."), Care la rândul său, conţine o perioadă care marchează textul pe care doriţi să se aplice .

Să vedem acum CSS care, semnificativ, la locul de muncă:

 . Boximg {



  



 poziţia: relativă;



  



 lăţime: 400px; / * aceeaşi lăţime a imaginii * /



  



 Inaltime: 300px; / * înălţime aceeaşi imagine * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 de fund: 0px;



  



 stânga: 0px;



  



 lăţime: 100%;



  



 fundal: rgb (0, 0, 0);



  



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







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



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



  



 scrisoare-spaţiere:-1px;







 }

Caseta de Depozit (". Boximg") are aceeaşi dimensiune şi de poziţionarea în raport cu imaginea pe care este destinat pentru a se potrivi.
Cutie de depozitare a textului (". Boxtesto") este punctul central al muncii noastre are de poziţionare absolută, pe care îl elimină din fluxul normal de elemente şi este poziţionat în colţul din stânga jos a recipientului acestuia şi are, evident, o lăţime de până la 100% pentru a ocupa întregul spaţiu disponibil pe orizontală. Interesant, apoi, cele două definiţii de fundal folosind RGB şi rgba care servesc pentru a defini fundalul întunecat şi semi-transparente.
De control. "Text", în cele din urmă, are ca scop unic pentru a stiliza textul şi se aplică un pic de "umplutură.

• <<
• 1
• 2
• >>