如何将img元素放在透明的img元素后面？

时间：2014-10-21 15:06:43

标签： javascript html css z-index transparent

我有两个img元素，我希望第一个image.png落后于透明的image.png。我尝试了很多不同的东西（z-index，透明背景颜色，rgba背景颜色，定位绝对和相对，在div中嵌套一个，使它们都成为div）。现在我一直在尝试使用透明的.png图像。图像.png实际上是在它背后，但它仍然通过它显示。请帮忙。

html：

<body>
    <main class="site-wrapper">
        <div class="carnival"></div>
        <div id="images">
            <img id="divbox" src="images/divbox.png">
            <img id="clown1" src="images/clown1.png">
        </div>
    </main>
</body>

js :(我做过js b / c中的风格我有兴趣学习如何这样做）：

//styles

//divbox:
document.getElementById('divbox').style.display = "inline-block";
document.getElementById('divbox').style.transform = "skew(-2deg)";
document.getElementById('divbox').style.marginTop = "21%";
document.getElementById('divbox').style.marginLeft = "47.6%";
document.getElementById('divbox').style.height = "200px";
document.getElementById('divbox').style.width = "200px";
document.getElementById('divbox').style.border = "1px solid orange";
document.getElementById('divbox').style.position = "absolute";
document.getElementById('divbox').style.zIndex = "2";

//clown1:
document.getElementById('clown1').style.display = "inline-block";
document.getElementById('clown1').style.transform = "rotate(90deg)";
document.getElementById('clown1').style.marginTop = "21%";
document.getElementById('clown1').style.marginLeft = "53%";
document.getElementById('clown1').style.border = "1px solid green";
document.getElementById('clown1').style.position = "relative";
document.getElementById('clown1').style.zIndex = "1";

感谢您的帮助，如果我能回答问题，请告诉我。

更新：

抱歉不清楚。我现在已经实现了将图像置于其他图像后面，但由于图像顶部是透明的，因此后面的图像正在显示。我怎么阻止这个？

以下是正在发生的事情的一个例子：

http://oi61.tinypic.com/2mw9egx.jpg

请注意，橙色边框位于顶部，因此它绝对位于顶部。

更新2 ：

这应该让我非常清楚我想要什么。再次抱歉混淆：

http://oi59.tinypic.com/eamb0n.jpg

4 个答案:

答案 0 :(得分：1)

我会做以下jsFiddle：http://jsfiddle.net/7gdx48fu/。可能需要重新加载几次以查看叠加效果的良好示例。

为两个图像创建一个包装器DIV。将包装器DIV设置为position: relative，以便我们可以在其包含的图像之一上使用绝对定位。通过这样做，我们可以防止绝对定位的图像在页面的其他位置（如浏览器窗口的左上角）对齐自己。

然后，将我们的叠加图像（透明PNG）的位置设置为position: absolute以及top: 0和left: 0，以使其与左上角的第一个图像对齐。

如果您观看包含图片的顺序，则可以在不使用z-index的情况下执行此操作。将您想要的图像放在透明PNG后面的标记中，然后是透明的PNG。

<div class="img-container">
    <img src="http://lorempixel.com/200/200/city/">
    <img class="overlay" src="http://lorempixel.com/200/200/city">
</div>

.img-container {
    position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.25; /* using this to replicate the transparent PNG */
}

修改

OP的要求已经改变，包括如何防止透明图像背后的图像通过透明图像显示。

这是一个更新的jsFiddle：http://jsfiddle.net/7gdx48fu/2/。

这种方法我将透明PNG包装在包装DIV中并设置它的背景颜色。我在我的例子中使用了白色，但你可以使用任何颜色。

<div class="img-container">
    <img src="http://lorempixel.com/200/200/city/">
    <div class="overlay">
         <img src="http://lorempixel.com/200/200/city">
    </div>
</div>

.img-container {
    position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    top: 15px; /* shifting overlay for illustrative purposes - not use case code */
    left: 15px; /* shifting overlay for illustrative purposes - not use case code */
}
.overlay img {
    opacity: 0.25; /* using this to replicate the transparent PNG */
}

不完美，但我不确定如何继续进行。

编辑2

OP似乎想做一种掩饰。您可以使用overflow: hidden。

执行此操作

我更新了jsFiddle：http://jsfiddle.net/7gdx48fu/4/

在这个更新的答案中，我保留了包装器DIV并将其设置为固定的宽度和高度。然后应用overflow: hidden。我们在这里做的是创建一个不可见的窗口，只有当它在窗口的维度内时才显示内容。

要使图像看起来好像是从基础层图像中出来，只需调整包装DIV内图像的位置即可。对于jsFiddle，只需在top中使用.mask img的值。

这需要对.mask DIV的正确位置和大小进行一些调整，以满足您的需求，但希望能指出正确的方向。

<div class="img-container">
    <img src="http://lorempixel.com/200/200/city/">
    <div class="mask">
        <img src="http://lorempixel.com/200/50/city">
    </div>
</div>

.img-container {
    position: relative;
}
.mask {
    position: absolute;
    top: 25px;
    left: 25px;
    height: 100px;
    width: 100px;
    overflow: hidden;
    border: 1px solid red; /* for illustrative purposes */
}
.mask img {
    position: relative;
    top: 25px;
}

答案 1 :(得分：0)

您是否尝试过css opacity属性？ 

#clown1{ opacity:0.3;}

答案 2 :(得分：0)

  1. 制作两张图片＆＃39;位置absolute代替relative
  2. 为了使上述工作，一些共同的祖先（即#images）也必须具有非默认位置（例如relative）
  3. 忘记zIndex - 其他条件相同，后一个元素将是＆＃34;最顶层＆＃34;
  4. 将以上所有内容放在CSS样式表而不是JS代码中！

    5. 忘记其他转换和边距等，您需要的核心CSS是：

    #images {
    position: relative;
}

#divbox, #clown1 {
    position: absolute;
}

答案 3 :(得分：0)

将它们放在父容器中。使父级具有位置：relative并将两个图像放置为position：absolute。这样他们就会堆叠。（我没有检查过的东西.img的顺序可能是错的 - 玩一下。

CSS：

.parent > img.transparent {
    position: absolute;
}
.parent > img {
    position: absolute; opacity: 0.5
}

HTML：

<div class="parent" style="position:relative">
    <img src="other.png" class="transparent"/>
    <img src="transparent.gif"/>
</div>

更多解释：当你使父/祖先元素的位置相对时，意味着它的绝对内容将相对于父元素而不是整个窗口

相关问题
最新问题