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

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

javascript html css

Javascript 如何将img元素放在透明的img元素后面？,javascript,html,css,z-index,transparent,Javascript,Html,Css,Z Index,Transparent,我有两个img元素，我希望第一个image.png位于transparent image.png后面。我尝试了很多不同的方法（z索引、透明背景色、rgba背景色、绝对和相对定位、在一个div中嵌套一个，使它们都成为div）。现在我一直在尝试使用一个透明的.png图像。实际上，image.png就在它后面，但它仍然通过它显示出来。请帮忙 html: <body> <main class="site-wrapper"> <div class="c

我有两个img元素，我希望第一个image.png位于transparent image.png后面。我尝试了很多不同的方法（z索引、透明背景色、rgba背景色、绝对和相对定位、在一个div中嵌套一个，使它们都成为div）。现在我一直在尝试使用一个透明的.png图像。实际上，image.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>

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

更新：

抱歉没有说清楚。我现在已经获得了另一个图像后面的图像，但是由于图像ontop是透明的，所以后面的图像正在显示。我该怎么阻止这一切

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

请注意，橙色边框是ontop，因此它肯定是ontop

更新2：

这应该让我清楚我想要什么。再次为困惑感到抱歉：

您是否尝试过css不透明度属性

#clown1{ opacity:0.3;}

将两幅图像的位置设置为绝对位置，而不是相对位置

要使上述方法起作用，某些共同祖先（即

#images

）也必须具有非默认位置（例如

relative

）

忘记zIndex——如果所有其他元素都相等，则后一个元素将是“最上面的”

将以上所有内容放在CSS样式表中，而不是JS代码中忘记其他转换和边距等，您需要的核心CSS是：

#images {
    position: relative;
}

#divbox, #clown1 {
    position: absolute;
}

将它们都放在父容器中。使父对象具有位置：相对，并放置两个具有位置：绝对的图像。这样他们就会堆叠起来。（像这样的东西，我没有检查img的顺序可能是错误的-玩一点

CSS:

HTML:

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

我将执行类似于以下JSFIDLE的操作：。可能需要重新加载几次才能看到覆盖工作的良好示例

为两个图像创建一个包装DIV。将该包装DIV设置为

位置：relative

，这样我们就可以在其中一个图像上使用绝对定位。通过这样做，我们可以防止绝对定位图像在页面中的其他位置（如浏览器窗口的左上角）自动对齐

然后，将覆盖图像（透明PNG）的位置设置为

position:absolute

，以及

top:0

和

left:0

，使其与第一张图像的左上角对齐

如果观察图像的包含顺序，则无需使用

z-index

即可完成此操作。将所需图像放置在标记中的透明PNG后面，然后是透明PNG

.img容器{
位置：相对位置；
}
.覆盖{
位置：绝对位置；
排名：0；
左：0；
不透明度：0.25；/*使用此选项复制透明PNG*/
}

编辑

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

以下是更新的JSFIDLE:

在这个方法中，我将透明的PNG包装在一个包装器DIV中，并设置它的背景色

.img容器{
位置：相对位置；
}
.覆盖{
位置：绝对位置；
排名：0；
左：0；
背景色：白色；
顶部：15px；/*出于说明目的移动覆盖-非用例代码*/
左：15px；/*为了说明目的而移动覆盖-不是用例代码*/
}
.叠加img{
不透明度：0.25；/*使用此选项复制透明PNG*/
}

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

编辑2

OP似乎想做一种形式的掩蔽。你可以通过

溢出：隐藏来实现
我已经更新了JSFIDLE：
在这个更新的答案中，我保留了包装器DIV，并将其设置为固定的宽度和高度。然后应用溢出：隐藏。我们在这里所做的是创建一个不可见的窗口，仅当内容在窗口的尺寸范围内时才显示内容
要使图像看起来像是从基本层图像出来的，只需调整包装器DIV中图像的位置。对于JSFIDLE，只需在中使用top
的值。mask img

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


.img容器{
位置：相对位置；
}
.面具{
位置：绝对位置；
顶部：25px；
左：25px；
高度：100px；
宽度：100px；
溢出：隐藏；
边框：1px纯红；/*用于说明*/
}
.面具{
位置：相对位置；
顶部：25px；
}
不清楚您想做什么。请，请，请，请使用样式表！想知道这应该是什么样子。不要使用#ids，因为您可能会有多个这样的类，或者至少添加类，以便为所有具有class=“小丑”的小丑等设置css规则@nepeo他根本不应该使用js，但是css对于所有那些不会从内存中改变的元素，我认为你用错了元素的方法-透明的一个必须是最上面的，因此是最后一个。我做了所有这些，它只是淡出图像。图像实际上在另一个后面，真正的问题是另一个图像是透明的o它通过它显示出来，但我不希望它在它后面出现。你是说你需要动态opac
#images {
    position: relative;
}

#divbox, #clown1 {
    position: absolute;
}

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

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