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

Question

我有一个圆 Angular 方框图像，它有一条沿左侧延伸的红色 strip ，并具有我在 photoshop 中创建的透明背景(白色部分)。我想在这个盒子后面放一张图片。我尝试设置 position:absolute 和 z-index: -1; 但是，它将图像放在所有内容后面。有没有办法只用 CSS 就可以实现这一点？附言我一直在寻找解决方案，但我遇到的那些似乎对我没有任何帮助。

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

如果不在元素上设置 position，则无法可靠地设置 z-index；堆叠也与元素的容器有关，因此如果一切都在根级别，则带有负 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/