varias superposiciones de imágenes se

Question

tengo tres imágenes que quiero de la superposición (con HTML + CSS, lo hago no quieren usar Javascript si es posible):

Este es el resultado que me le gustaría lograr:
[image4]

Esto es lo que he intentado:

CSS:

.imageContainer { 
    position: relative; 
} 

#image1 { 
    position: absolute; 
    top: 0; 
    z-index: 10; 

    border: 1px solid blue; 
} 
#image2 { 
    position: absolute; 
    top: 0; 
    z-index: 100; 

    border: 1px solid fuchsia; 
} 
#image3 { 
    position: absolute; 
    top: 0; 
    z-index: 1000; 

    width: 10%; 
    height: 10%; 

    border: 1px solid green; 
} 

HTML:

<div class="imageContainer"> 
    <img id="image1" src="http://i.stack.imgur.com/Es4OT.png"/> 
    <img id="image2" src="http://i.stack.imgur.com/WQSuc.png"/> 
    <img id="image3" src="http://i.stack.imgur.com/Xebnp.png"/> 
</div>​ 

imagen1: "principal" imagen (imagen1 debe establecer la altura máxima y el ancho máximo para un ImageContainer - SE HTML anterior) [borde azul ]
imagen2: horizontal-align: center; y top: 0; en relación con imagen1 [frontera rosada]
imagen3: cambiar de tamaño en un 10% desde su tamaño de origen, en relación con horizontal-align: center; imagen1 [borde verde]

Mi propenso a errores HTML + CSS resultaron en esto:

no puedo encontrar la manera mi CSS debería ser ¿Qué debo hacer para lograr un resultado como [image4]?

Answer 1

Se puede, por hacerlo con un div y más antecedentes, por ejemplo:

#someDiv 
{ 
    background: url('topImage.jpg') center, 
      url('imageInTheMiddle.jpg') 0px 0px, 
      url('bottomImage.jpg') /*some position*/; 
} 

Era la forma más fácil de di splay it. Por supuesto, en el lugar donde coloqué los valores de posicionamiento, debe agregar el suyo.

ACTUALIZACIÓN

En el caso que se dice después, creo que se puede utilizar 3 divs posicionamiento absoluto con sus fondos y manipularlos con CSS3 transform atributo. Te da la posibilidad de rotar, escalar y mucho más con tus elementos. Y también puedes manipularlo con javascript.

More info about css3 transform

Answer 2

hacer que las imágenes transparentes

ACTUALIZADO el código de nuevo para su emisión transperancy código actualizado para la rotación de la imagen he aplicado rotación de la imagen imagen transportador (imagen2) esperanza de que le ayuda

<style type="text/css"> 
    .imageContainer { 
     position: relative; 
     width:165px; 
     height:169px; 
    } 

    #image1 { 
     position: absolute; 
     top: 0; 
     z-index: 10; 
     width:120px; 
     height:120px; 
     border: 1px solid blue; 
    } 
    #image2 { 
     position: absolute; 
     top: 0; 
     z-index: 20; 
     border: 1px solid fuchsia; 
     opacity:0.6; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 


    /*for adding image rotation */ 
     -webkit-transform: rotate(90deg); /*//For chrome and safari*/ 
     -moz-transform: rotate(90deg); /*//For ff*/ 
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /*// For ie */ 
    /* End for adding image rotation */ 



    } 
    #image3 { 
     position: absolute; 
     top: 0; 
     z-index: 30; 
     width: 40%; 
     height: 40%; 
     border: 1px solid green; 
     left:70px; 
     opacity:0.9; 
    filter:alpha(opacity=90); /* For IE8 and earlier */ 


    } 

    </style> 






    <form name="frmabc" action="" method="post"> 
<div class="imageContainer"> 
    <img id="image1" src="Es4OT.png"/> 
    <img id="image2" src="WQSuc.png" /> 
    <img id="image3" src="Xebnp.png" /> 
</div> 
</form>