Teksto rašymas (su pusiau permatomas fonas) per atvaizdą

Kad yra gana paplitusi matyti svetainių ir dienoraščių naujos kartos, rašomi vadinamieji perdangos virš vaizdus, ​​dažnai kartu su tamsiai permatomas fonas. Štai pavyzdys:

Šiame straipsnyje mes darome mūsų vaizdus naudojant CSS perrašymui.

Pirmas dalykas, kurį reikia padaryti, tai sukurti HTML struktūra panašus į šį:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> gražus saulėlydžio! </ span>



  



 </ Div>







 </ Div>

Kaip matote aš sukūriau DIV konteinerį (su klasės ". Boximg"), per kurį aš poziciją savo įvaizdį ir naują div (klasės ". Boxtesto"), kuri savo ruožtu yra span kad žymi tekstą, kurį norite taikyti .

Leiskite mums dabar pamatyti CSS, kad materialiai, darbo vieta:

 . Boximg {



  



 position: relative;



  



 Plotis: 400px; / * paties pločio įvaizdžio * /



  



 Aukštis: 300px; / * tas pats vaizdas aukštis * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 apačioje: 0px;



  



 kairėje: 0px;



  



 plotis: 100%;



  



 fone: RGB (0, 0, 0);



  



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







 }







 {Span.testo



  



 padding: 10px;



  



 spalva: # FFFFFF;



  



 Šriftas: paryškinti 24px/45px Helvetica, sans-serif;



  



 laiško diapazonas:-1px;







 }

Daiktadėžė (". Boximg") yra tokio paties dydžio ir santykinis pozicionavimo vaizdas, kuris yra skirtas patenkinti.
Saugojimo dėžutės tekstas (". Boxtesto") yra mūsų darbo dėmesio absoliučios padėties, kuri pašalina jį iš įprasto srauto elementai ir yra išdėstyti kairiajame apatiniame maržą savo konteinerį ir, aišku, turi plotis iki 100% užimti visą turimą erdvę horizontaliai. Įdomu, tada du apibrėžimai fone naudojant RGB ir RGBA, kad padėti apibrėžti tamsiame fone ir pusiau skaidri.
Trukmę. "Tekstas", pagaliau, yra vienintelis tikslas Stilizuoti tekstą ir taikyti mažai "paminkštinimas.

• <<
• 1
• 2
• >>