Question

我有一个div，它有一个background-img和img元素，在这个div里面。我想将background-img显示在img的顶部。两个图像都是相对的。我知道这听起来有点奇怪，我的意思是这是一个“背景”图像，但是如果有任何办法可以帮助我这是我的代码以一种简单的方式：

<div id="sample_div">
    <img src="path of the image">
</div>

<style>
    #sample_div{
        position: relative;
        background-img= url(another path);
    }
    #sample_div img{
        position:relative;
    }
</style>

有关这些图片的更多信息：背景图片是一个1800 * 150尺寸的地板，我希望在它上面显示2个字符。我想以这样的方式对齐这两个图像，使它们站在地板图像的顶部，并且它们的脚稍微低于地板的顶部表面。认为这可能有助于弄清楚我想要做什么

Answer 1

z-index: 100;

Z-Index，总会重新定位事物，无论你想要的是前面还是后面的东西。当然，为了让事情回归，请将其设为负数。它不必是100，我总是只使用更大的数字。希望这有帮助

Answer 2

您可以在这种情况下使用伪元素：

演示：http://jsfiddle.net/GCu2D/364/

HMTL：

<div id="sample_div">
    <img src="http://www.lorempixel.com/400/200/sports/2" />
</div>

CSS：

#sample_div {
    position: relative;
}
#sample_div:after {
    position:absolute;
    content:url(http://www.lorempixel.com/400/200/sports/1);
    top:0;
    bottom:0;
    right:0;
    left:0;
    z-index:1;
}
#sample_div img {
    position:relative;
}

Answer 3

不需要将它移动到任何地方，只需在需要时隐藏子图像：

.hide-inner-contents {
  background-image:url(src);
}
.hide-inner-contents > img{
  display:none;      
}

<div class="hide-inner-contents"><img/></div>

如何将背景图像放在div中的img前面

3 个答案: