¿Puede una etiqueta de imagen en html z-index detrás de una imagen de fondo css?

Question

Tengo una imagen de fondo CSS que quiero delante de mi etiqueta img. La imagen de fondo css tiene un índice z de 1 y la etiqueta img tiene un índice z de 0. ¿Puedo poner una etiqueta img detrás del fondo CSS con el índice z o un fondo CSS siempre estará detrás de un archivo z? img tag independientemente de su índice Z?

Answer 1

Claro, un elemento HTML con un background-image y un mayor z-index puede superponer cualquier otro elemento HTML, en su caso una simple etiqueta <img />. Pero la etiqueta <img> no debe estar anidada dentro de la etiqueta que contiene la imagen de fondo.

Esto funcionará

<img src="../image.jpg" /> 
<div style="background: url(../image2.gif); z-index: 1">Content</div> 

esto no:

<div style="background: url(../image2.gif); z-index: 1"> 
    <img src="../imag.jpg" /> 
</div> 

Answer 2

uso 2 divs una imagen de fondo con el o los divs y configurar cada div/imagen del índice z

Answer 3

sería útil si se pudiera mostrar algo de código para entender lo que quiere hacer. Si sólo desea mostrar una imagen en frente de otro, use 2 contenedores como Div o Span ..

<div id="image1"> 
    <span id="image2"></span> 
</div> 

Answer 4

Funciona si establece condiciones de relativa o absoluta. Asegúrese de configurarlo ya que puede ser heredado.