ओवरले कई चित्रों

Question

मैं तीन छवियों जो मैं ओवरले करना चाहते है (एचटीएमएल + सीएसएस के साथ, मैं नहीं जावास्क्रिप्ट यदि संभव हो तो उपयोग करना चाहते हैं):

यह परिणाम है जो मैं प्राप्त करने के लिए करना चाहते हैं:
[छवि 4]

यह है कि मैं क्या करने की कोशिश की है:

सीएसएस:

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

Image1: "मुख्य" छवि (Image1 अधिकतम ऊंचाई एक imageContainer के लिए अधिकतम चौड़ाई निर्धारित करना चाहिए - ऊपर से एचटीएमएल) [नीले रंग के बॉर्डर [गुलाबी सीमा] horizontal-align: center; और top: 0; रिश्तेदार Image1 को
+०१२३०५५८८७८४:]
Image2 Image3: 'अपने मूल आकार से 10% से आकार दिया, horizontal-align: center; रिश्तेदार Image1 करने के लिए [हरी सीमा]

मेरे त्रुटियों की संभावना HTML + सीएसएस इस के परिणामस्वरूप:

मैं समझ नहीं कैसे कर सकते हैं मेरा सीएसएस होना चाहिए। परिणाम [image4] जैसे परिणाम प्राप्त करने के लिए मुझे क्या करना चाहिए?

Answer 1

आप कर सकते हैं मदद करता है के लिए छवि रोटेशन आवेदन किया है बनाना उदाहरण के लिए इसे एक div और अधिक पृष्ठभूमि के साथ बनाएं:

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

यह di आसान तरीका था इसे चलाओ निश्चित रूप से जहां मैंने स्थिति मूल्य रखा है, आपको अपना एक जोड़ना होगा।

अद्यतन

मामले में जो आप के बाद कहते हैं कि में, मुझे लगता है कि आप अपने पृष्ठभूमि के साथ 3 निरपेक्ष स्थिति divs का उपयोग करें और उन्हें css3 transform विशेषता के साथ हेरफेर कर सकते हैं। यह आपको अपने तत्वों के साथ घूमने, स्केल और बहुत कुछ करने की संभावना देता है। और आप जावास्क्रिप्ट के साथ इसे कुशल बना सकते हैं।

More info about css3 transform

Answer 2

छवियों पारदर्शी

छवि रोटेशन के लिए transperancy मुद्दा अपडेट किए गए कोड के लिए फिर से कोड UPDATED मैं चांदा छवि (Image2) आशा है कि आप

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