html - 一个元素在另一个元素上的背景图像

Question

目标是在 div#slider 元素的背景图像上呈现“a”元素的背景图像。

首先，这是代码:

<div id="top_bg">
    <div id="top">
        <nav>
            <ul>
                <li><a href="#">Link onegfdgdfg gd</a></li>
                <li><a href="#">Link two</a></li>
                <li><a href="#">Link three</a></li>
                <li><a href="#">Link four</a></li>
                <li><a href="#">Link five</a></li>
            </ul>
        </nav>
    </div>
</div>

<div id="slider">
</div>

jFiddle 链接包含我对此的尝试:http://jsfiddle.net/zorza/drBBC/11/

我尝试将“a”元素绝对定位在相对“li”中，这使我能够为它提供 z-index，因此它可以出现在#slider 上。它几乎可以工作，但要求“li”具有恒定宽度以在其中放置“a”，当内部文本比恒定宽度宽时，这会导致不好的方式(参见第一个菜单项)。

我想要得到的是一个“a”元素，根据内部文本设置它自己的宽度，并摆脱“li”元素的恒定宽度，这样菜单项之间的间隙就会均匀.

我想出的第二种方法是将#slider 背景分割成两个图形，并将其中一个(箭头高度的那个)放在#top div background-image 中。这样“a”元素就不需要绝对定位了。但是这个解决方案一点也不优雅，当需要更改图像时会产生各种麻烦。

Answer 1

#top-bg{
    background-image:url('yourImage.png');
}

那行得通。不需要 div#background。

编辑试试这个:

a:hover :after{
    width:0;
    height:0;
    content:'';
    border:10px solid transparent;
    border-top-color:#333333;
    position:absolute;
    top:100%;
    left:49%;
}

我认为这应该可行。不添加图像，不定位新元素和重新定位 anchor