Tekstin kirjoittaminen (ja osittain läpinäkyvä tausta) yli kuvan

Vaikutus, joka on melko yleinen nähdä sivustot ja blogit seuraavan sukupolven, on kirjoitettu ns overlay yli kuvia, johon usein liittyy tumma läpikuultava tausta. Tässä esimerkki:

Tässä artikkelissa teemme päällekirjoituksen meidän kuvia käyttämällä CSS.

Ensimmäinen tehtävä on luoda HTML rakenne näyttää tältä:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> kaunis auringonlasku! </ span>



  



 </ Div>







 </ Div>

Kuten näette olen luonut DIV kontti (luokan ". Boximg"), jossa olen asema kuvaani ja uuden div (luokan ". Boxtesto"), joka puolestaan ​​sisältää span joka merkitsee tekstin, jonka haluat hakea .

Katsokaamme nyt CSS, että olennaisesti, työpaikalla:

 . Boximg {



  



 kanta: suhteellinen;



  



 leveys: 400px; / * Sama kuvan leveys * /



  



 korkeus: 300px; / * Sama kuva korkeus * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 pohja: 0px;



  



 vasen: 0px;



  



 leveys: 100%;



  



 tausta: rgb (0, 0, 0);



  



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







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



 fontti: rohkea 24px/45px Helvetica, sans-serif;



  



 letter-spacing:-1px;







 }

Säilytyslaatikko (". Boximg") on samankokoinen ja suhteellinen paikannus kuvaan, joka on tarkoitus sijoittaa.
Säilytyslaatikko on teksti (". Boxtesto") on keskittyä työmme on absoluuttinen sijainti, joka poistaa sen normaalia elementtejä ja on sijoitettu vasempaan alakulmaan sen pakkaus ja ilmeisesti on leveys 100% miehittää koko käytettävissä olevan tilan vaakatasossa. Mielenkiintoista, siis kaksi määritelmää taustan RGB ja RGBA jotka palvelevat määritellä tumma tausta ja osittain läpinäkyvä.
Aikajänteellä. "Text", lopuksi on ainoana tarkoituksena on tyylitellä tekstiä ja soveltaa vähän "täyte.

• <<
• 1
• 2
• >>