php - Hjælp til at lave tekst på billede i PHP - Udvikleren.dk

Tags: php html css

<< < 1 2 > >>

Bruger #16492 @ 16.08.11 11:26

Hej alle.

Jeg håber I vil hjælpe mig med et problem, jeg har.

Jeg kan nemlig ikke finde ud af, hvordan jeg placeret en tekst ovenpå et billede, hvor baggrunden af teksten, skal være lidt halvtransperent sort.

Se på billedet: www.musicupdates.dk/hjelpsorttransperentt.png

Jeg vil gerne have det som på billedet :-)

Nogle der kan hjælpe mig?

19 svar postet i denne tråd vises herunder
4 indlæg har modtaget i alt 14 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 16.08.11 11:47

4.283

Kan du ikke gøre det med ren HTML+CSS?

Sæt en div som ligger oven over billedet, på denne div angiver du en backgrund som er et PNG billede med den ønskede transparens og skriv teksten inden i div-elementet.

Du kan også benytte en løsning a la: http://www.udvikleren.dk/forum/34958/css-opacity-paa-bg,-men-ikke-paa-indholdet,-hvordan/side3/

I PHP vil du benytte nogen lunde samme metode, hvor du kopierer to billeder sammen
http://www.php.net/manual/en/function.imagecopymerge.php

og derefter indsætter tekst
http://www.php.net/manual/en/function.imagefttext.php

Bruger #15754 @ 16.08.11 12:14

989

HTML kode

 <div>
   <p>Tekst her</p>
   <img src="images/test.png" />
 </div>

CSS kode

 div {
   position:relative;
 }
 div p {
   position:absolute;
   bottom:0;
   width:100%;
   background-color:rgba(232,232,232,0.5);
   color:#fff;
   padding:7px 0;
 }

Ren html/css hvor du placere teksten oven på billedet og giver den en transparent baggrund.

Indlæg senest redigeret d. 16.08.2011 12:19 af Bruger #15754

Bruger #15754 @ 16.08.11 12:44

989

CSS kode

 #udvalgt_forside {
     position:relative;
 }
 #udvalgt_forside p {
     position:absolute;
     bottom:0;
     width:100%;
     background-color:rgba(232,232,232,0.5);
     color:#fff;
     padding:7px 0;
 }

Bruger #15754 @ 16.08.11 13:42

989

CSS kode

 #udvalgt_forside {
     position:relative;
 }
 #udvalgt_forside p {
     position:absolute;
     bottom:0;
     width:100%;
     background-color:rgba(232,232,232,0.5);
     color:#fff;
     padding:7px 0;
 }
 #udvalgt_forside p:first-child {
     top:0;
 }

HTML kode

 <div id="udvalgt_forside">
     <p>Toppen</p>
     <p>Bunden</p>
 </div>

Bruger #16492 @ 16.08.11 11:51

Indlæg senest redigeret d. 16.08.2011 12:22 af Bruger #16492

Bruger #16492 @ 16.08.11 12:21

Super fedt!

Hvad skal jeg skrive i css "udvalgt_forside p", for at få den helt nederst?
Den må ikke være afhængig af height på billedet, da det er meget varierende.. Den skal bare være nederst. :-)

CSS kode

 #udvalgt_forside p {
    position:absolute;
    top:10px;
    left:20px;
  }

Bruger #16492 @ 16.08.11 12:49

Yes yes..Virkelig fedt! Hvad nu hvis jeg gerne vil have en sort halvtrensperent boks mere? en der er ovenover den anden..

?

Hvad skal jeg så?

Bruger #16492 @ 23.08.11 14:05

CSS kode

 #udvalgt_forside {
     position:relative;
 }
 #udvalgt_forside p {
     position:absolute;
     bottom:0;
     width:100%;
     background-color:rgba(232,232,232,0.5);
     color:#fff;
     padding:7px 0;
 }
 #udvalgt_forside p:first-child {
     top:0;
 }

HTML kode

 <div id="udvalgt_forside">
     <p>Toppen</p>
     <p>Bunden</p>
 </div>

Hvordan får jeg den til at være kompatibel til internet explorer :L?

Bruger #15754 @ 23.08.11 14:08

989

Det skulle den være, har du en test side? Hvilken version af IE?

Bruger #16492 @ 23.08.11 14:09

Gå ind på MusicUpdates.dk

Den virker for mig i Google Chrome, men ikke IE

Både nye og gamle IE..

<< < 1 2 > >>

Hjælp til at lave tekst på billede i PHP

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler