Html 叠加若干图像

我有三个我想覆盖的图像（使用HTML+CSS，如果可能的话，我不想使用javascript）：

这是我希望达到的结果：
[image4]

这就是我尝试过的：

CSS:

HTML:

​

image1：“主”图像（image1应设置imageContainer的最大高度和最大宽度-上图为se HTML）[蓝色边框]
图像2：

水平对齐：居中和<代码>顶部：0相对于图像1[粉色边框]

image3：从其“原点大小”调整10%，水平对齐：居中相对于图像1[绿色边框]

我的易出错HTML+CSS导致以下情况：

我不知道我的CSS应该是什么样子。我应该怎么做才能获得像[image4]这样的结果？
使图像透明

再次更新代码以解决透明性问题
更新的图像旋转代码我已将图像旋转应用于量角器图像（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>


.imageContainer{
位置：相对位置；
宽度：165px；
高度：169px；
}
#图1{
位置：绝对位置；
排名：0；
z指数：10；
宽度：120px；
高度：120px；
边框：1px纯蓝色；
}
#图2{
位置：绝对位置；
排名：0；
z指数：20；
边框：1px纯色紫红色；
不透明度：0.6；
过滤器：alpha（不透明度=60）；/*适用于IE8及更早版本*/
/*用于添加图像旋转*/
-webkit变换：旋转（90度）；//*//用于chrome和safari*/
-moz变换：旋转（90度）；//*//用于ff*/
过滤器：progid:DXImageTransform.Microsoft.BasicImage（rotation=1）；///ie*/
/*结束添加图像旋转*/
}
#图3{
位置：绝对位置；
排名：0；
z指数：30；
宽度：40%；
身高：40%；
边框：1px纯绿色；
左：70像素；
不透明度：0.9；
过滤器：alpha（不透明度=90）；/*适用于IE8及更早版本*/
}
您可以使用一个div和多个background，例如：

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

这是展示它的更简单的方式。当然，在我放置定位值的地方，您必须添加一个

更新

在您后面所说的情况下，我认为您可以使用3个绝对定位div作为背景，并使用css3
transform
属性对它们进行操作。它让你可以旋转，缩放和更多的元素。您还可以使用javascript对其进行操作

您需要支持哪些浏览器？尽可能多的浏览器，但如果必须选择：FF和Chrome，您的任何元素的z索引在哪里？你可以将它们添加到+1中，这是一个很有吸引力的问题。我已经将
css3
添加到标记中，因为如果你只想用html和css处理这些元素，你需要css3。谢谢你的回答！它绝对没有问题，但我需要访问量角器图像（[image2]与我的命名约定）。为什么？首选结果[image4]显示了主要任务的简化部分：量角器应该能够旋转。在下一步中，我将使用该行为指示监控摄像机的当前转向角。不管怎样，你是否可以通过你的提案访问imageInTheMiddle.jpg？Whaa？？我不知道你可以放多个
url（）
s。太棒了。@Hauns TM对不起，我的英语不如你写的那么好，但我会尽力回答我理解的部分。实际上，我不确定你是否只能变换（在你的例子中是旋转）一个背景。我认为这是不可能的。是否有可能避免在[image1]上分别固定
宽度
和
高度
。[image3]并使用相对变量，如
%
（与[image1]的所有相对性）？您的意思是说基于时钟图像吗？？因为时钟图像的尺寸比其他图像大。如果将时钟映像的维度指定给.imageContainer。您将能够以%为单位设置其余图像的尺寸。我更新了上面的代码。好吧，最后一个问题（我在原始问题中没有提到）是指示监控摄像机的当前转向角度。所有这些都应该适用于普通浏览器（大屏幕）和智能手机（小屏幕）。这就是我不想在像素前使用%的原因我将为此拍摄三张照片：一张监视图像（由上面的蝴蝶图像描绘），一张量角器图像，一张箭头图像。监控图像通过javascript每秒更新一次，量角器角度取决于摄像机的位置，箭头始终指向上方，我已经为量角器的图像旋转更新了上面的代码。看看是否有帮助。
<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>

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