0

我有一个圆形方形框图像，它有一条沿左侧延伸的红色条带，并具有我在 Photoshop 中创建的透明背景（白色位）。我想在这个盒子后面放一张图片。我尝试过设置position:absolute，z-index: -1;但是，它将图像置于所有内容的后面。有没有办法只用 CSS 来实现这一点？PS我已经寻找解决方案，但我遇到的那些似乎根本没有帮助我。

在此处输入图像描述

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;

}
4

1 回答 1

3

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;
}

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

如果您不能在标记模板中添加任何额外的 HTML，则可以重新调整borderdiv 的用途，这似乎没有多大作用：

#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/

于 2013-10-22T08:37:19.433 回答