Question

目标是在div＃slider元素的backgroung-image上渲染“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/

我尝试在相对“li”中使用“a”元素的绝对定位，这使我能够给它一个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%;
}

我认为这应该有效。无需添加图像，也无需定位新元素和重新定位锚点

Answer 2

您是否尝试过将物品的宽度设置为相同尺寸

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

，自动宽度为

a {
width: auto;
}

一个元素的背景图象在另一个元素的

2 个答案: