编辑：

Question

我有一个圆角的方框图像，有一个沿左侧运行的红色条带，并且我在photoshop中创建了一个透明背景（白色位）。我想在这个盒子后面放一张图片。我已尝试设置position:absolute和z-index: -1;但是，它会将图像放在所有内容之后。有没有办法只用CSS实现这个目标？附：我已经找到了解决方案，但我遇到的那些似乎根本没有帮助我。

enter image description here

CSS：

#boxes img {
            border:1px solid;
            margin:4px 0 0 0px;
            padding:0;
            position: absolute;
            width: 359px;
            height: 218px;
            z-index: -1 ;
           -moz-border-radius-topright:5px;
           -moz-border-radius-topleft:5px;
           -moz-border-radius-bottomright:5px;
           -moz-border-radius-bottomleft:5px;
           -webkit-border-top-right-radius:5px;
           -webkit-border-top-left-radius:5px;
           -webkit-border-bottom-right-radius:5px;
           -webkit-border-bottom-left-radius:5px;

 }

#boxes .box {
           width:370px;
           height:241px;
           float:left;
           background-image:url(../imgs/box_front.png);
           background-repeat:no-repeat;
           background-color:#FFF;
           margin:80px 30px 0 0;

}

Answer 1

如果不在元素上设置z-index，则无法可靠地设置position;堆叠也与元素的容器相关，因此如果所有内容都处于根级别，则带有负z-index的图像将在页面后面消失。（就个人而言，我尽量避免使用负z-index值。）

#boxes {
    position: relative;
}

#boxes img {
    border:1px solid;
    margin:4px 0 0 0px;
    padding:0;
    position: absolute;
    width: 359px;
    height: 218px;
    z-index: 1 ;
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
 }

#boxes .box {
    width:370px;
    height:241px;
    float:left;
    background-image:url(../imgs/box_front.png);
    background-repeat:no-repeat;
    background-color:#FFF;
    margin:80px 30px 0 0;
    position: relative;
    z-index: 2;
}

编辑：

问题是您的HTML是结构化的，因此红色条纹是您正在将图像加载到的容器的背景图像。由于这也有background-color，因此图像会丢失。

更好的方法是使用HTML / CSS'自然文档流 - 即元素出现在HTML中的后者，“更高”它在自然z-index中。这意味着您不必指定z-index值，但您需要在代码中添加表示div（除非您想要使用:after伪元素）：

每个灰色框都需要如下所示：

<div class="grey box">
    <h3><a href="#">Stationary</a></h3>
    <a href="#" class="normal"><span class="border">&nbsp;</span><img src="http://placekitten.com/g/361/220"><div class="innerBox">&nbsp;</div></a>
</div>

...你的CSS需要改变。从.box样式中删除背景，并将其添加到CSS：

#boxes .innerBox {
    position: absolute;
    left: 0;
    top: 0;    
    width:370px;
    height:241px;
    background-image:url(http://i754.photobucket.com/albums/xx182/rache_R/box_front_zps196242cf.png);
    background-repeat:no-repeat;
}

然后，您可以从#boxes .box中删除z-index，并且因为innerBox div出现在标记中的图像之后，它自然会显得高于您的图像。

如果您无法在标记模板中添加任何额外的HTML，您可以重新调整border div的用途，这似乎没有做太多的事情：

#boxes .border
{
    border:none;
    z-index:1;
    cursor:pointer;
    position: absolute;
    left: 0;
    top: 0;    
    width:370px;
    height:241px;
    background-image:url(http://i754.photobucket.com/albums/xx182/rache_R/box_front_zps196242cf.png);
    background-repeat:no-repeat;
}

您还需要更新图片：

#boxes img {
    /* other declarations */
    position: absolute; 
    left: 4px; 
    top: 0;
    /* other declarations */
}

...并确保您的#boxes .box样式设置为position: relative;。

那应该是你：http://jsfiddle.net/mr3Fq/4/

如何将图像放在另一个具有透明背景的图像后面

1 个答案:

编辑：