3

Necesito poner una imagen con transparencia encima de otra, y no veo cómo hacerlo porque estoy usando Bootstrap, el código es éste:

{% for promocion in promociones %}
    <div class="col-sm-4 polygraphy element isotope-item">
        <div class="item">
            <div class="item_wrapper">
                <div class="img_block">
                    {% if promocion.foto %}
                        <img style="z-index: 1" src="/promocionesImg/{{ promocion.foto }}" class="img-responsive imgPrevia2">
                        {% if '1' == promocion.activa %}
                            <img style="z-index: 300" src="{{ asset('images/active.png') }}">;
                        {% endif %}
                    {% endif %}
                    <a class="featured_ico_link view_link" href="{{ path("promociones_ficha", { 'idPromocion': promocion.id }) }}"></a>
                </div>
                <div class="featured_items_body">
                    <div class="featured_items_title">{{ promocion.nombre }}</div>
                    <div class="featured_meta">{{ promocion.descripcion }}<br>{{ promocion.fechaini|date('d/m/Y') }}</div>
                    <a class="sigue-leyendo" href="{{ path("promociones_ficha", { 'idPromocion': promocion.id }) }}">{{ "Sigue.leyendo"|trans }}</a>
                </div>
            </div>
        </div>
    </div>
{% endfor %}

Necesito poner la imagen active.png encima de la otra imagen y no sé cómo hacerlo.

1 respuesta 1

5

Si quieres poner una imagen encima de la otra, ambas imágenes deben estar posicionadas de forma absoluta, en otro caso no se pueden colocar una encima de la otra.

Una vez tienes una foto sobre la otra debes hacer uso del Z-index para indicar en qué orden se deben renderizar las imágenes.

Te dejo este fiddle para que veas cómo funciona: La imagen del ojo es un .PNG con transparencias y su z-index es superior al de la otra, una imagen .JPG que actúa de fondo.

.eye{
  position:absolute;
  height:200px;
  width:200px;
  top: 40px;
  left : 40px;
  z-index: 1;
}

.heaven
{
  position:absolute;
  height:300px;
  width:300px;
  z-index: -1;
}
<html>
<head>
</head>
<body>
	<div style="position: relative; left: 0; top: 0;">
		<img src="https://pre00.deviantart.net/a22b/th/pre/i/2015/109/c/e/blue_eye_3b_saved_as_png_to_preserve_transparency_by_shadowprince14-d8qbizi.png" class='eye'/>
		<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/Vv03xyNwg/white-heaven-background_ryb1grtbx_thumbnail-full11.png" class="heaven"/>
	</div>
</body>
</html>

2
  • 3
    Te he añadido el fiddle aqui, para no depender de páginas externas :) Commented el 20 jun. 2018 a las 10:18
  • 1
    Perfecto, gracias Pablo, estoy acostumbrado a StackOverflow inglés y tienen esa mala costumbre que me la han pegado :P
    – Juliosor
    Commented el 20 jun. 2018 a las 10:19

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.