叠加多张图片

Question

我有三张图片，我想用HTML + CSS叠加它们（如果可能的话，不要使用JavaScript）：

这是我想要达到的效果：

[image4]
这是我尝试过的方法：

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

图片1: "主"图片 (图片1应为图像容器设置最大高度和最大宽度-请参见上面的HTML) [蓝色边框]
图片2: 相对于图片1进行水平居中(horizontal-align: center;)，并位于图片1的顶部(top: 0;) [粉色边框]
图片3: 相对于图片1进行10％的调整大小，且相对于图片1进行水平居中(horizontal-align: center;) [绿色边框]

我的易错HTML + CSS导致了这个问题:

我无法想出正确的CSS代码。为了达到类似于[image4]的结果，我该怎么做？

- Hauns TM

---

你需要支持哪些浏览器？ - steveax

尽可能多的选择，但如果必须选择：FF和Chrome。 - Hauns TM

你的元素的z-index在哪里？你可以添加它们。 - Lawrence

+1 对于一个有吸引力的问题。 - sgowd

我已经将 css3 添加到标签中，因为如果您想仅使用 HTML 和 CSS 操纵这些元素，则需要 css3。 - Mateusz Rogulski

Answer 1

您可以使用一个div和更多的背景来实现，例如：

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

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

更新

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

有关css3 transform的更多信息

- Mateusz Rogulski

---

感谢您的答复！它绝对没有任何问题，但我需要按我的命名约定访问量角器图像（[image2]）。为什么？首选结果[image4]显示了一个主要任务的简化部分：量角器应该能够旋转。在下一步中，我将利用这个行为来指示监视摄像机的当前旋转角度。有可能以任何方式使用您的提议访问imageInTheMiddle.jpg吗？ - Hauns TM

哇？？我不知道你可以放多个url()。太棒了。 - ThinkingStiff

@Hauns TM 抱歉，我的英语不太好，虽然我可以理解你写的所有内容，但我会尝试回答我理解的部分。实际上，我不确定你是否可以仅旋转一个背景（在你的情况下）。我认为这可能是不可能的。 - Mateusz Rogulski

Answer 2

使图像透明

针对透明度问题，再次更新了代码。 为旋转的图像（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>

- Parag

---

能否避免在[image1]和[image3]上固定width和height，并使用相对变量如％（所有相对于[image1]）的变体？ - Hauns TM

你的意思是基于时钟图片吗？因为时钟图片的尺寸比其他图片大。如果你将时钟图片的尺寸给.imageContainer，你就能够以百分比的形式设置其他图片的尺寸了。我已经更新了上面的代码。 - Parag

好的，最后一个问题（我在原问题中没有提到）是指示监视摄像头的当前旋转角度。 所有这些都应该在普通浏览器（具有大屏幕）和智能手机（具有小屏幕）中运行。这就是为什么我想在像素前面使用％的原因。 ----- 我将有三张照片：监视图像（由上面的蝴蝶图像描绘），量角器图像，箭头图像。监视图像每秒通过javascript更新，量角器角度取决于摄像机的位置，箭头将始终指向上方。 - Hauns TM

Hauns TM，我已更新上面的代码以进行量角器的图像旋转。看看是否有帮助。 - Parag