4

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

这里有一个JsFiddle可以重现<ul>. 这里是现场网站。

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

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

4

1 回答 1

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;
}

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

演示位于：http: //jsfiddle.net/audetwebdesign/GpAek/

于 2013-06-09T22:38:02.577 回答