Come posso mettere un div su un'immagine?

Sto provando a mettere un div su un'immagine in modo che si comporti come una didascalia, direttamente sopra l'immagine.Come posso mettere un div su un'immagine?

A volte la didascalia è più lunga delle altre volte, quindi non è possibile impostare uno specifico margine superiore: -px perché a volte l'altezza della didascalia è più lunga.

Ho provato questo e lo sfondo del collegamento (nero) non mostra, come anche ho appena detto, l'altezza didascalia cambia quindi questo metodo è spazzatura:

<div> 

    <img src = "<? echo $image_url ?>" style="float:left;min-width:220px;max-width:220px;"> 
    <a href="LINK" ><div style="width:210px;background-color:black;color:white;bottom:0;margin-top:-20px;padding-left:10px;padding-top:10px;font-size:16px;"><? echo $title ?></div></a> 

</div>

fonte

2012-10-01 Rusty Schmidt

Perché non usi semplicemente 'background-image'? –

Provare qualcosa così:

<div style="position:relative;"> 

    <img src = "<? echo $image_url ?>" style="min-width:220px;max-width:220px;"> 
    <div style="position:absolute;width:210px;background-color:black;color:white;top:0;left:0;padding-left:10px;padding-top:10px;font-size:16px;z-index:5;"><a href="LINK" ><? echo $title ?></a></div> 

</div>

Hai avuto alcune cose in corso:
1) Avevi un div all'interno di un tag 'a'. Non dovresti inserire elementi a livello di blocco (come div) all'interno di elementi di livello inline (come a's).
2) Rimuovere il galleggiante dall'immagine, impostare la posizione del div esterno sulla posizione relativa e quella del div interno su assoluto, quindi posizionarlo assolutamente nella parte superiore del div contenente. Da lì, aggiungi uno z-index maggiore di 0 al div interno per buona misura, per assicurarti che rimanga impilato sopra l'immagine.

fonte

2012-10-01 19:48:15 Mike

Funziona alla grande! Per la cronaca di altri post, nel caso in cui un altro utente abbia lo stesso problema, ho appena passato in alto: 0 in basso: 0 e fa quello che mi serviva! Molte grazie! –

Questo ha funzionato principalmente. Ho dovuto aggiungere 'display: inline-block' al div esterno anche se nel mio caso. –

Usa proprietà CSS z-index per allineare il testo sopra l'immagine. L'elemento con indice z più alto appare in alto.

fonte

2012-10-01 19:44:31

Questo codice dovrebbe funzionare per quello che stai cercando di fare:

<div style="background: transparent url('<? echo $image_url ?>') no-repeat 0 0; padding: 10px 0 10px 10px; width: 200px;"><a href="LINK"><? echo $title ?></a></div>

fonte

2012-10-01 19:45:36 ews2001

Aggiungi position:absolute; left:0px;top:0px;z-index: 2; a div corrente, e aggiungere style="position:relative;" nel div genitore

<div style="position:relative;"> 

    <img src = "<? echo $image_url ?>" style="float:left;min-width:220px;max-width:220px;"> 

<a href="LINK" ><div style="position:absolute;z-index: 2;left:0px;top:0px;width:210px;background-color:black;color:white;bottom:0;padding-left:10px;padding-top:10px;font-size:16px;"><? echo $title ?></div></a>

fonte

2012-10-01 19:46:36

Questa sembra essere la giusta direzione, come potrei fare il link div andare in basso piuttosto che in alto: Ho provato in basso: 0px; invece di top: 0px –

dipende dalla dimensione dell'immagine, se l'altezza dell'immagine è maggiore e l'altezza div è inferiore: 0px; dovrebbe funzionare –

Come posso mettere un div su un'immagine?

risposta

Problemi correlati