background-image伪z-index

Question

我有<ul>个背景图片。 问题是<li>有border-bottom超过一个背景图像（在本例中为箭头）。我希望箭头是边框底部的一层。你可以在这里看到重叠：

here是一个重现<ul>的JsFiddle。 Here是实际网站。

我知道不可能为背景图像设置z-index，但是有一个技巧（或者更好，一种干净的方式，以避免这种重叠并将边框底部设置为下面的一个层或背景 - 想象上面一层）？

编辑：设置.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/