css - 背景图像伪 z 索引

Question

我有一个 <ul>具有多个背景图像。问题是 <li>我们有一个 border-bottom高于一个背景图像(在本例中为箭头)。我希望箭头是边框底部的一层。你可以在这里看到重叠:

和here是一个重现 <ul> 的 JsFiddle . Here是实时站点。

我知道不可能为背景图像设置 z-index，但是有没有什么技巧(或者，更好的，一种干净的方法，可以避免这种重叠并将 border-bottom 设置在下面的一层或 background-图像在上面一层)？

编辑:设置.box ul li {position: relative;z-index: -1}使箭头高于 border-bottom但链接不再可点击:DEMO :(

Answer 1

以下可能是一个选项。

对于 HTML:

<div style="list-style-type:none;width:400px" class="box">
    <ul id="lastfm">
        <li>...</li>
        ...
        <li class="overlay"></li>
    </ul>
</div>

添加一个额外的元素 li.overlay 并使用 CSS 将背景图像附加到它:

.box ul#lastfm {
    padding-right: 75px;
    position: relative; /* So that the absolute positioning based on this block... */
    margin-left: 0;
    list-style: square outside none;
}

.overlay {
    outline: 1px dashed blue; /* for demo only */
    position: absolute;
    z-index: 1; /* to make sure it is in front of list items... */
    bottom: 0;
    right: 0;
    height: 70px; /* will depend on your images... */
    width: 110px;
    background-attachment: scroll, scroll;
    background-clip: border-box, border-box;
    background-color: transparent;
    background-image: ...
    background-origin: padding-box, padding-box;

    background-position: right bottom, right bottom, left 0px;
    /* Make sure syntax is correct, otherwise Safari gets confused... */

    background-repeat: no-repeat, no-repeat;
    background-size: auto auto, 70px auto, auto auto;
}

确保 background-position 的语法绝对正确，否则 Safari 将无法识别。 Firefox 更宽容一些。

演示地址:http://jsfiddle.net/audetwebdesign/GpAek/