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

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背景图像中。 这样，“ 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%;
}

我认为应该可以。 不添加图像，不定位新元素并重新定位锚点

Answer 2

您是否尝试过，将商品的宽度全部设为相同大小

li, a {
display: /*block or inline-block depending on the layout you were after*/
}

对于自动宽度

a {
width: auto;
}