Html Imagen sobre imagen

¿Alguien me puede decir cómo puedo agregar una imagen sobre otra imagen sin usar Z-index o Z-order?Html Imagen sobre imagen

Fuente

2009-07-02 Adrian Pirvulescu

Difícil de responder correctamente sin saber exactamente lo que quiere lograr, es probable que el índice z no sea lo que realmente necesita. Por ejemplo, la siguiente funcionaría:

<div id="container"> 
    <img src="img1.jpg" id="img1" /> 
    <img src="img2.jpg" id="img2" /> 
</div> 

#container { 
    position:relative; 
} 

#img2 { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
}

también si se utiliza <img> etiquetas o background-images depende del valordel semántica de las imágenes, es decir, que está contenido o de presentación actualy de la página?

Fuente

2009-07-02 15:09:03 roryf

Me gustan todas las respuestas ... pero he aceptado esta porque tiene el css exacto que quería :). Gracias a todos !!!!!!!!!!!!!!!!! –

Gracias buena respuesta – kobe

El HTML no es válido sin atributos 'alt' en las imágenes. – tomasz86

Establecer imagen de fondo de la imagen principal en el CSS con el background-image propiedad

Fuente

2009-07-02 15:05:49 Colin

Esto probablemente sea la manera más rápida, pero también puede colocar una de las imágenes absolutamente sobre la otra. – Dan

@Dan: sí, si usa la posición de fondo, aunque su imagen de superposición necesita tener suficiente espacio transparente alrededor para que la imagen subyacente sea visible. – DisgruntledGoat

La forma más fácil es para asegurarse de que ambos son del mismo tamaño, uno tiene la transparencia, y utiliza este fragmento:

<img style="background:url(image.jpg)" src="overlay_image.gif" alt="" />

Fuente

2009-07-02 15:07:07 Weegee

overlay_image debe estar en el atributo src, no en la regla de fondo. Como era de esperar, la regla de fondo determinará el fondo ... – DisgruntledGoat

Ahh, buena captura, no estaba pensando cuando escribí eso. Editado – Weegee

¿Pero ambos tendrán el mismo tamaño? –

También puede utilizar el texto sobre la imagen usando el siguiente código:

<TABLE BORDER="0" cellpadding="0" CELLSPACING="0"> 
    <TR> 
    <TD WIDTH="221" HEIGHT="300" BACKGROUND="samplepic.jpg" VALIGN="bottom"> 
     <FONT SIZE="+1" COLOR="yellow">Sample Text</FONT> 
    </TD 
    </TR> 
</TABLE>

Espero que ayude.

Fuente

2011-11-17 19:05:19 sara

Código muy "old school". No use esto (excepto para el correo electrónico HTML). – tomasz86

Respuesta

Cuestiones relacionadas