7

我有三个要叠加的图像（使用 HTML + CSS，如果可能，我不想使用 javascript）：

图像1 图2 图3

这是我想要达到的结果： 我的首选结果
[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>​

image1：“主”图像（ image1应该为imageContainer 设置最大高度和最大宽度 -上面的se HTML） to image1 [绿色边框]
horizontal-align: center;top: 0;
horizontal-align: center;

我容易出错的 HTML + CSS 导致了这个： 在此处输入图像描述

我无法弄清楚我的 CSS 应该如何。我应该怎么做才能获得像 [image4] 这样的结果？

4

2 回答 2

6

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

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

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

更新

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

有关 css3 转换的更多信息

于 2012-07-12T05:53:42.637 回答
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>
于 2012-07-12T05:39:52.673 回答