søndag den 15. juli 2012

Tekst ovenpå billede

Dette er noget rigtigt mange gerne vil kunne lave og som er relativt simpelt bare man ved hvordan man gør.
Så derfor laver jeg et lille eksempel:

<div style="position:relative">
      <span style="background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); position:absolute; bottom: 7px; right:0px; padding: 3px 15px 3px 8px; color:#b8d30b; font-size:9pt;">My text goes here</span>
      <img src="image.jpg" alt="Image of Laurits West" />
</div>

At du laver en div med position relative udenom gør at din position absolute indeni bliver absolut relativt til den div udenom.
Og ved at du gør den position: absolute gør at den ikke positioneres sammen med andre elementer og står derfor over eller ovenpå billedet.

Håber det hjælper og kan bruges for er noget rigtigt mange gerne vil kunne og forstå for det er noget man tit kommer til at have behov for.

Ingen kommentarer:

Send en kommentar

Kan du lide mit indlæg, har en kommentar, forslag eller andet på hjerte så skriv venligst