背景图片伪元素z-index

Question

我有一个带有多个背景图的<ul>。问题是

s具有超出一个背景图(在本例中为箭头)的border-bottom。我想让箭头在border-bottom上面。你可以在这里看到重叠： 这里有一个JsFiddle，复制了这个<ul>。 这里是实时站点。

我知道不可能为背景图像设置z-index，但是否有技巧（或更好的方法）避免此重叠并将border-bottom设置为低于层或将背景图像设置为高于层？ 编辑：设置.box ul li {position: relative;z-index: -1}使箭头位于border-bottom之上，但链接不再可点击：演示 :(

- MultiformeIngegno

---

嗯...那不只能在特定分辨率下工作吗？ - MultiformeIngegno

它适用于任何分辨率。可能需要一个额外的标签来放置图像，但仅此而已。我之前看到过使用 z-index: -1 的答案，那个行得通吗？ - Marc Audet

不行。:( 在问题上添加了信息。我可以请你试试你的解决方案吗...? :) - MultiformeIngegno

目前这是最好的半可接受解决方案！谢谢！:D - MultiformeIngegno

你好！实际上，问题出在Safari浏览器上（包括Windows版本），所以如果我能解决这个问题，也许就能解决你的问题。Safari支持CSS3多图像，所以让我来查一下。 - Marc Audet

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/

- Marc Audet