Question

我有一个<ul>列表，其中包含两个<li>，如下所示：

<ul>
            <li id="sc-1">
            </li>
            <li id="sc-2">
            </li>
</ul>

我对这些元素的CSS如下：

#sc-1{
    background-image:img/banner1.jpg no-repeat center;
    overflow:hidden
    position: relative;
    z-index:5;
}

#sc-2{
    background-image:img/banner2.jpg no-repeat center;
    overflow:hidden;
    position: relative;
    z-index:4;
}

ul{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    list-style-type: none;
}

li{
    display:block;
    width:92.3%;
    height:300px;
    position: absolute;
}

是否有任何可能的方式来叠加这些图片，以便sc-1位于sc-2之上？

Answer 1

您需要在相关的li元素上设置绝对位置。此外，在此实例中声明背景速记时，您只需使用background而不是background-image

DEMO http://jsfiddle.net/t9b8c177/

#sc-1{
    background: url(myImage1.jpeg) no-repeat center;
    overflow:hidden
    z-index:5;
}

#sc-2{
    background: url(myImage2.jpg) no-repeat center;
    overflow:hidden;
    z-index:4;
}

ul{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    list-style-type: none;
}

li{
    width:92.3%;
    height:300px;
    position: absolute;
    top: 0;
    left: 0;
}

在HTML / CSS中堆叠图像

1 个答案: