Questa non è la domanda apparentemente comune su come inserire il testo su un'immagine di sfondo.Inserisci l'immagine di sfondo sul testo?
Ho un'immagine di sfondo che voglio lavorare come una sovrapposizione - dovrebbe essere sopra il testo. Per semplicità, ponendo un altro div sul div esistente e dando che l'immagine di sfondo è molto più difficile.
È possibile che un'immagine di sfondo sia sopra il testo?
Questo non è sicuramente possibile, e giustamente così. Sarebbe errato (e confuso) se fosse possibile utilizzare la proprietà di sfondo di sfondo per un valore diverso dallo sfondo.
Il modo giusto per farlo è con un div posizionato in modo assoluto (con larghezza e altezza impostato a 100%) all'interno del contenitore, accanto al testo: http://jsfiddle.net/EvqNb/
Beh, non penso che sia possibile. Per progetti complessi, dovrebbero essere utilizzati approcci complessi. Non è possibile creare la prima pagina di MSN in un solo div. Ad ogni modo, come soluzione alternativa è possibile impostare la proprietà color di tale div a transparent, rende il testo invisibile ma è lì davanti allo sfondo.
ne dite qualcosa come
<div class="container" style="position:relative;width:100px;height:100px;">
<p>Test to hide</p>
<div class="overlay" style="position:absolute;z-index:999;background:url(yourimage.jpg); width:100px;height:100px;"></div>
</div>
Se ho chiaramente capito la domanda, penso {text-indent: -9999px;} sarebbe Aiuto.
Ho risolto questo problema abbastanza facilmente rendendo il testo trasparente e impostando la modalità di visualizzazione su inline-block. Si noti che è necessario conoscere l'esatta dimensione della tua immagine, se si desidera visualizzare esattamente l'immagine:
<html>
<head>
<style>
#mydiv {
width: 50px; /* The width of your image in pixels. */
height: 50px; /* The height of your image in pixels. */
display: inline-block; /* The inside needs to be a block to set it's size.
If positioned, it could be block as well. */
color: transparent; /* Ensures we don't see the text. */
background: url('logo.png'); /* The actual image we want to use. */
overflow: hidden; /* Ensures that any text will not spill out of our box. */
}
</style>
</head>
<body>
<div id="mydiv">Example.com</div>
</body>
</html>
Hi Deividas, Non cercare di nascondere il testo. L'immagine di sfondo aveva trasparenza ma non voleva che il testo selezionato, se non ricordo male. –