transicion - poner una capa sobre otra css

¿Cómo colocar una imagen sobre otra?

Question

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

Answer 1

Cree un gráfico PNG semitransparente con un símbolo de "Juego" y el tamaño que desee (por ejemplo, 240x320).

Digamos que lo llamó "overlay.png", y digamos que la miniatura generada por YouTube está en http://img.ytimg.com/abcdefg/0.jpg

Ahora todo lo que necesitas en tu código es esto:

<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>

Siempre y cuando su público objetivo no siga utilizando IE6, debe estar seguro.

Answer 2

Encontrará la solución en el siguiente hilo en : Cómo dibujar un gráfico sobre otro gráfico

En breve (citando después de 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 de por qué y cómo funciona en el hilo original.

Answer 3

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 mucho del diseño que desee lograr. Supongamos que desea alcanzar el estilo de YouTube, donde tiene una imagen en miniatura y desea superponer una imagen del botón de reproducción en la parte superior. Si desea que la miniatura sea una etiqueta <img> real, necesitará un marcado adicional, como este:

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

El envoltorio <div> es necesario para que pueda apuntar el img y el span correctamente, y tener dimensiones para contenerlos. El span 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 es claramente incorrecto, hágamelo saber, ¡lo revisaré!)

Esto supone un par de cosas:

1. Sus miniaturas siempre tendrán un tamaño fijo y su imagen de superposición coincide con
2. Tu imagen superpuesta es un PNG semitransparente.

También puedes usar la opacity: estilo para alcanzar el # 2. Por supuesto, IE6 va a hacer retroceder su cabeza fea y necesitarás usar una solución PNG si vas por la ruta de la imagen transparente, o un filtro de opacidad separado si usas ese método. Ambos se contestan sin duda en otro lugar en o son fácilmente compatibles con Google.

Si tiene otros requisitos, podría ser posible hacerlo sin el margen de beneficio adicional, ya que dije que todo depende de lo que necesite exactamente. Es posible que algunos requisitos no sean posibles sin JavaScript (lo que por supuesto significaría que podría inyectar cualquier marca adicional con eso).

Answer 4

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

Answer 5

Tomando tu ejemplo de youtube, podrías hacer esto fácilmente 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" />

La forma en que funciona es simple, tiene la imagen pequeña de YouTube como PNG transparente o GIF y luego configura la imagen de fondo como imagen más grande, esto dará el efecto de que la imagen más pequeña se encuentre en el centro sin marcas adicionales.