Trebuie introdus un tag <span> caruia ii vom aplica o imagine de fundal. Daca nu va place sa aveti un tag <span> gol puteti sa creati acest lucru cu ajutorul JavaScript. Aici puteti vedea cum lucreaza.
Apoi in CSS ceea ce trebuie avut in vedere este sa specificati unui element div o pozitie relativa iar elementuleu span sa-i dati o pozitie absoluta. Puteti pozitiona elementul span unde doriti folosint instructiunea CSS top si left.
IE PNG Hack
Pentru ca imaginile PNG sa fie transparente in IE6 este folosit iepngfix.htc hack. Downloadati o copie a acestui fisier si introduceti codul urmatori dupa tagul <head> din pagina web:
<style type="text/css">
.photo span { behavior: url('/iepngfix.htc'); }
</style>
<![endif]-->"
Look and Feel
Pentru a schimba designul trebuie editate specificatiile tagului span din CSS.
The jQuery Solution
Stiu ca multora nu le place sa aibe un tag span gol. Acest aspect se poate rezolva folosind libraria Java jQuery inserata dupa elementul head din sursa paginii:
<script type="text/javascript">
$(document).ready(function(){
//prepend span tag
$(".photo a").prepend("<span></span>");
});
</script>"
In continuare aveti diferite exemple ale acestui tutorial:
Sursa se gaseste aici
