Esta no es la pregunta aparentemente común sobre cómo poner texto sobre una imagen de fondo.¿Poner imagen de fondo sobre el texto?
Tengo una imagen de fondo que quiero que funcione como una superposición, debe estar sobre el texto. Por simplicidad, colocando otro div sobre el div existente y dando que la imagen de fondo es mucho más difícil.
¿Es posible que una imagen de fondo esté encima del texto?
Esto definitivamente no es posible, y con razón. Sería incorrecto (y confuso) si pudiera usar la propiedad de fondo de un elemento para cualquier cosa que no sea background.
La forma correcta de hacerlo es con un div con posición absoluta (con la anchura y la altura se ajusta al 100%) dentro del contenedor, junto con el texto: http://jsfiddle.net/EvqNb/
Bueno, no creo que sea posible. Para diseños complicados, se deben usar enfoques complicados. No es posible hacer la primera página de MSN en solo un div. De todos modos, como una solución alternativa puede establecer color propiedad de ese div en transparent, hace que el texto sea invisible pero está allí delante del fondo.
¿Qué tal algo así como
<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>
Si he entendido claramente la pregunta, creo que {text-indent: -9999px;} haría ayuda.
Resolví este problema bastante fácilmente haciendo que el texto sea transparente y estableciendo el modo de visualización en inline-block. Tenga en cuenta que lo que necesita saber el tamaño exacto de la imagen si desea mostrar exactamente su imagen:
<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>
Hola Deividas, No tratar de ocultar el texto. La imagen de fondo tenía transparencia pero no quería que se seleccionara el texto, si no recuerdo mal. –