¿Cómo colocar una imagen sobre otra?

Question

¿Cómo poner una imagen sobre otra imagen más grande, como en youtube, un botón de reproducción se muestra en la parte superior de la miniatura del video?

Answer 1

Si tiene buen control sobre el tamaño de la imagen, hemos utilizado el fondo para varios elementos; por ejemplo, establezca el fondo de una celda de tabla en una imagen y coloque una pestaña img dentro de la celda.

Answer 2

No estoy seguro de que YouTube use imágenes para este efecto, ¿no es todavía el reproductor Flash?

De todos modos, exactamente cómo se hace esto depende en gran medida del diseño que desea lograr. Supongamos que desea lograr el estilo de YouTube, donde tiene una imagen en miniatura y desea superponer una imagen de botón de reproducción en la parte superior. Si desea que la imagen en miniatura para ser un <img> etiqueta real que necesitará un poco de margen de beneficio adicional, como esto:

<div class="thumb-wrapper"> 
<img src="mythumbnail.gif" alt="my awesome video" /><span></span> 
</div> 

Se requiere que el envoltorio <div> para que pueda orientar la img y abarcan correctamente y tener dimensiones para contenerlos en El tramo es donde irá la imagen de superposición.

.thumb-wrapper { 
position:relative; 
} 

.thumbwrapper span { 
position:absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 100%; 
z-index: 100; 
background: transparent url(overlay.png) no-repeat; 
} 

(En realidad no he probado esto, si su blatently mal que me haga saber que voy a revisarlo!)

Esto supone un par de cosas:

1. Sus fotos en miniatura siempre será un tamaño fijo y su superposición de imágenes que coincide
2. su imagen superpuesta es un semi-transparente PNG

También puede usar el estilo opacity: para lograr el # 2. Por supuesto, IE6 criará su fea cabeza y necesitarás usar una solución PNG si usa la ruta de imagen transparente, o un filtro de opacidad por separado si usas ese método. Ambas opciones se responden indudablemente en cualquier otro lugar en Stack Overflow o fácilmente en google.

Si tiene otros requisitos, es posible que lo haga sin el marcado adicional, como ya he dicho, todo depende de lo que necesite exactamente. Es posible que algunos requisitos no sean posibles sin JavaScript (¡lo que significa, por supuesto, que podrías inyectar cualquier marca adicional con eso!).

Answer 3

Tomando su ejemplo de youtube, fácilmente se podría hacer esto con 2 imágenes y 1 etiqueta img y un poco de CSS, por supuesto;)

<style> 
    img.youtube { 
     width:500px; height:500px; 
     margin:0; padding:0; 
     background:transparent url(/point/to/your/larger/image.jpg) no-repeat center 
    } 
</style> 

<img src="/point/to/youtube/play/image.png" alt="Gotta have alt text ;)" border="0" class="youtube" /> 

El funcionamiento es simple, usted tiene la pequeña imagen de Youtube como PNG transparente o GIF y luego establecer la imagen de fondo como la imagen más grande, esto dará el efecto de que la imagen más pequeña esté en el centro sin marcado adicional.

Answer 4

Va a encontrar la solución en el siguiente hilo en StackOverflow: How to draw a graphic over another graphic

Poco (citando después Ipsquiggle):

<div style="position:relative"> 
    <div> 
    <img url="backgroundimg.png"> 
    </div> 
    <div style="position:absolute; left:0; top:0;"> 
    <a href="foo.html"><img url="smallgraphic.png"></a> 
    </div> 
</div> 

Más detalles por qué y cómo funciona en el hilo original.

Answer 5

Las respuestas de todos aquí son demasiado complicadas.

Haz un gráfico PNG, semitransparente, con un símbolo que parezca indicar "jugar". Hazlo del tamaño que quieras, tal vez un gráfico de 320x240 o lo que no. Digamos que llamó "overlay.png"

Digamos que el YouTube genera miniatura está en http://img.ytimg.com/abcdefg/0.jpg

Ahora todo lo que necesita en su código es la siguiente:

<a href="destination_of_your_link"><img src="overlay.png" width="320" height="240" border="0" style="background:URL(http://img.ytimg.com/abcdefg/0.jpg) center center black;" /></a>

Mientras su el público objetivo aún no está utilizando IE6, debe estar seguro.