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

【问题标题】：How to put an img element behind a transparent img element?如何将 img 元素放在透明 img 元素后面？
【发布时间】：2014-10-21 15:06:42
【问题描述】：

我有两个 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

【问题讨论】：

不清楚你想做什么。
拜托，拜托，请使用样式表！
很想知道这应该是什么样子。
不要使用#ids，因为你可能会拥有多个，或者至少添加类，这样你就可以为所有具有 class="clown"
@nepeo 他根本不应该使用 js，但对于所有不改变的人使用 css

标签： javascript html css z-index transparent

【解决方案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，只需使用 .mask img 中的 top 的值即可。

这需要对.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;
}

【讨论】：

我希望它完全消失在透明图像后面，而不仅仅是褪色。
嘿，非常感谢，但我更新了我的问题，希望对您有所帮助。我实际上想为小丑头设置动画，使其从透明 div 的一侧出来，所以我需要不显示。我希望它看起来像是从实际背景图像中的某物后面出来的。真的很抱歉造成混乱。
赞成使用我不知道的 lorempixel.com :) 谢谢！
我现在明白了。你说的是掩蔽效果。我想我对此有一个想法。
@MarkusHallcyon 再次对其进行了调整，使其更适合您的用例。

【解决方案2】：

您是否尝试过 css opacity 属性？

#clown1{ opacity:0.3;}

【讨论】：

是的，这只是让整个图像褪色。
我发现很难弄清楚您想要达到的目标。如果您不希望 image1 在 image2 后面可见，而不仅仅是页面上没有 image1 ???
不，因为我要对其进行动画处理，所以它从透明 div 的一侧出来，所以我需要不显示。我希望它看起来像是从实际背景图像中的某物后面出来的。
知道了，现在看到编辑后的帖子..正在寻找解决方案

【解决方案3】：

将两个图像的位置设为absolute 而不是relative
要使上述方法起作用，某些共同祖先（即#images）也必须具有非默认位置（例如relative）
忘记zIndex - 在其他条件相同的情况下，后一个元素将是“最顶层”
将以上所有内容放在 CSS 样式表中，而不是 JS 代码中！

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

#images {
    position: relative;
}

#divbox, #clown1 {
    position: absolute;
}

【讨论】：

我做了这一切，图像在透明图像的后面，但由于透明图像是透明的，它通过它显示出来。我该如何阻止这种情况发生？非常感谢。
@MarkusHallcyon 所以你的问题不是如何正确堆叠这两个图像？您是在问如何使透明图像不透明？请更准确，可能是您要实现的目标的简单视觉示例/模型。

【解决方案4】：

将它们都放在一个父容器中。使父级具有位置：相对并放置两个具有位置：绝对的图像。这样他们就会堆叠。（我没有检查过类似的东西 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>

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

【讨论】：

从记忆中，我认为你把元素弄错了——透明的元素需要在最上面，因此最后。
我做了这一切，它只是淡化了图像。该图像实际上在另一个图像的后面，真正的问题是另一个图像是透明的，因此它会通过它显示出来，但是当它在它后面时我不希望它。
你的意思是当它在它前面时你需要动态不透明度？如果是这种情况，那么您应该使用 javascript 更改不透明度/可见性 - 或者您希望图像位于透明的后面但不显示？我不明白你想要做什么..如果是这样的话，它根本不需要在它后面，但隐藏/显示：无