Question

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

这是我想要实现的结果： My preferred result
[图像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 ：“主”图片（图片1应设置imageContainer的最大高度和最大宽度 - 上面的HTML） [蓝色边框]
image2 ：horizontal-align: center;和top: 0;相对于image1 [粉色边框]
image3 ：相对于图片1 [绿色边框]的原始尺寸horizontal-align: center;调整了10％左右

我的错误HTML + CSS导致了这个： enter image description here

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

Answer 1

您可以使用一个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

Answer 2

使图像透明

更新了代码AGAIN for transperancy issue 用于图像旋转的更新代码我已经为量角器图像应用了图像旋转（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>

叠加几个图像

2 个答案: