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

How to put an img element behind a transparent img element?

本文关键字：img 元素 透明      更新时间：2023-09-26

我有两个img元素，我希望第一个image.png在透明image.png后面。我尝试了很多不同的东西（z索引、透明背景色、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

请注意，橙色边框是ontop，所以它肯定是ontop。

更新2：

这应该让我清楚地知道我想要什么。再次为混乱感到抱歉：

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

我会做一些类似于以下jsFiddle的事情：http://jsfiddle.net/7gdx48fu/.可能需要重新加载几次才能看到覆盖工作的好例子。

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

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

如果您观看包含图像的订单，则无需使用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，并将其设置为固定的宽度和高度。然后应用CCD_ 7。我们在这里所做的是创建一个不可见的窗口，只有当内容在窗口的维度内时才会显示内容。

要使图像看起来像是从底层图像中出来，只需调整图像在包装器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;
}

您尝试过css不透明属性吗？

#clown1{ opacity:0.3;}
  1. 将两个图像的位置设为absolute而不是relative
  2. 为了实现上述功能，一些共同的祖先（即#images）也必须具有非默认位置（例如relative）
  3. 忘记zIndex——如果其他元素都相等，后一个元素将是"最上面的"
  4. 将以上所有内容放在CSS样式表中，而不是放在JS代码中

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

#images {
    position: relative;
}
#divbox, #clown1 {
    position: absolute;
}

将它们都放在父容器中。使父图像具有position: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>

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

相关文章：