4

<ul>複数の背景画像があります。問題は、1 つの背景画像 (この場合は矢印) の上にある が<li>あることです。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;
}

の構文background-positionが完全に正しいことを確認してください。そうしないと、Safari がそれを理解できなくなります。Firefox はもう少し寛大でした。

デモはhttp://jsfiddle.net/audetwebdesign/GpAek/にあります。

于 2013-06-09T22:38:02.577 に答える