Imágenes de superposición en CSS

¿Cómo puedo obtener "mymessage.gif" para mostrar sobre "bread_wine.jpg".Imágenes de superposición en CSS

mymessage.gif tiene un fondo transparente.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>overlap images</title> 
<style type="text/css"> 
<!-- 
#navbar { 
    font-size: 18px; 
    font-weight: bold; 
    text-align: center; 
} 
#thebigimage { 
    background-image: url(bread_wine.jpg); 
    height: 548px; 
    width: 731px; 
    margin-right: auto; 
    margin-left: auto; 
} 
#overlapthis { 
    background-image: url(mymessage.gif); 
} 
--> 
</style> 
</head> 
<body> 
<div id="navbar">this is the nav bar</div> 
<div id="thebigimage"> 
<div id="overlapthis"></div> 
</div> 
</body> 
</html>

Fuente

2010-10-24 MP123

#overlapthis { 
    background-image:url("mymessage.gif"); 
    height:100px; 
    left:50px; /* play around with this */ 
    position:absolute; 
    top:90px; /* and play around with this */ 
    width:500px; 
} 

#thebigimage { 
    background-image:url("bread_wine.jpg"); 
    height:548px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; /* and this has to be relative */ 
    width:731px; 
}

Fuente

2010-10-24 21:55:19 Claudiu

¡Funcionó a la perfección! ¡Muchas gracias! – MP123

Sin preocupaciones amigo, en cualquier momento. Espero que entiendas lo que sucede allí :) – Claudiu

'background-size: 80px? Px;' se puede utilizar para especificar el tamaño de la imagen. – Anirudh

Trate

#overlapthis { 
    position: absolute; 
    top: ??px; 
    left: ??px; 
    z-index: 1; 
}

Fuente

2010-10-24 21:51:55

En mi caso, el índice Z fue un parámetro importante. Gracias ! – Aamol

Como lo tienes en este momento, la imagen se superpone ya. Simplemente no puede verlo porque no agregó tamaños a su superposición. Prueba esto:

#overlapthis { 
    background-image: url(mymessage.gif); 
    width: 500px; 
    height: 100px; 
}

A continuación, añadir márgenes (y una posición: absoluta) para colocar la imagen en la ubicación deseada.

Fuente

2010-10-24 21:56:27 Kablam

Respuesta

Cuestiones relacionadas