叠加多张图片答案

【问题标题】：Overlay several images叠加多张图片
【发布时间】：2012-07-11 16:21:58
【问题描述】：

我想要叠加三张图片（使用 HTML + CSS，如果可能，我确实不想使用 javascript）：

这是我想要达到的结果：
[图片4]

这是我尝试过的：

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>

image1：“主”图像（image1 应该为 imageContainer 设置最大高度和最大宽度 - 上面是 HTML） [蓝色边框]
image2：horizontal-align: center; 和 top: 0; 相对于 image1 [粉红色边框]
image3：从其原始大小调整 10%，horizontal-align: center; 相对于 image1 [绿色边框]

我容易出错的 HTML + CSS 导致：

我不知道我的 CSS 应该是怎样的。我应该怎么做才能达到[image4]这样的结果？

【问题讨论】：

需要支持哪些浏览器？
尽可能多，但如果我必须选择：FF 和 Chrome
任何元素的 z-index 在哪里？您可以将它们添加到
+1 提出一个有吸引力的问题。
我已将css3 添加到标签中，因为如果您只想使用 html 和 css 操作此元素，则需要 css3。

标签： html css

【解决方案1】：

使图像透明

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

【讨论】：

是否可以避免在 [image1] 上分别修复 width 和 height。 [image3] 并使用像 % 这样的相对变体（与 [image1] 的所有相关性）？
你的意思是基于时钟图像吗？因为时钟图像的尺寸大于其他图像。如果您将时钟图像的维度提供给 .imageContainer。您将能够以 % 为单位设置其他图像的其余尺寸。为此我更新了上面的代码。
嗯，最后一个问题（我在最初的问题中没有提到）是指示监控摄像头的当前转向角度。所有这些都应该在普通浏览器（大屏幕）和智能手机（小屏幕）中工作。这就是为什么我不想在像素前使用 % 。 -----为此我将有三张照片：一张监控图像（由上面的蝴蝶图像描绘），一个量角器图像，一个箭头图像。监控图像通过javascript每秒更新一次，量角器角度取决于相机的位置，箭头始终指向上方。
Hauns TM ，我已经更新了上面的量角器图像旋转代码。看看它是否有帮助。

【解决方案2】：

您可以使用一个 div 和多个背景来制作它，例如：

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

这是一种更简单的显示方式。当然，在我放置定位值的地方，你必须添加你的。

更新

在您之后所说的情况下，我认为您可以在背景中使用 3 个绝对定位 div，并使用 css3 transform 属性对其进行操作。它使您可以使用元素进行旋转、缩放等等。你也可以用javascript来操作它。

More info about css3 transform

【讨论】：

感谢您的回答！它绝对没有错，但我需要访问量角器图像（[image2] 使用我的命名约定）。为什么？首选结果 [image4] 显示了主要任务的简化部分：量角器应该能够旋转。在下一步中，我将使用该行为来指示监控摄像头的当前转向角度。无论如何都可以使用您的提案访问 imageInTheMiddle.jpg 吗？
哇？？我不知道你可以放多个url()s。太棒了。
@Hauns TM 对不起，我的英语不如我能理解你写的所有内容，但我会尽量回答我理解的部分。我实际上不确定您是否只能转换（在您的情况下旋转）其中一个背景。我认为这是不可能的。