在 HTML/CSS 中堆叠图像

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 元素上设置绝对位置。此外，在这种情况下声明背景 shorthand 时，您只需使用 background 而不是 background-image

演示版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 中堆叠图像

Stacking images in HTML/CSS

html

css

image

html-lists