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

【问题标题】：Background-image of an element over another element一个元素在另一个元素上的背景图像
【发布时间】：2015-03-07 09:53:07
【问题描述】：

目标是在 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/

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

我想要的是一个“a”元素来设置它自己的宽度取决于内部文本并摆脱“li”元素的恒定宽度，因此菜单项之间的间隙将是均匀的.

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

【问题讨论】：

标签： html css

【解决方案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%;
}

我认为这应该可行。无需添加图像，无需定位新元素并重新定位锚点

【讨论】：

如果你愿意，你也可以对你的标志做同样的事情。 @zorza
它需要从一开始就构建和定位我网站的整个标题，我想避免这种情况。 Page 的结构比 jFiddle 示例稍微复杂一些（真实站点：interclick2.home.pl/fiddle/1/index.php）。难道没有办法在现有标记中做到这一点吗？
对于初学者来说，我知道z-index 不适用于 JS fiddle。我不完全确定你想要实现什么。您希望图像位于a 元素下是吗？
是的，我希望“a”元素的背景图像（箭头）出现在 div#slider 元素的背景图像上，但不必绝对定位“a”元素（没有 z-index）。
不幸的是，它不起作用。你可以在这里看到它产生的效果：interclick2.home.pl/fiddle/3。当您使用 FireBug 删除 #slider_bg_x 元素时，无论您将鼠标悬停在哪个“a”上，都可以看到箭头显示在同一位置。而且它的颜色不是它应有的颜色。

【解决方案2】：

你有没有试过，让一个项目的宽度都一样大

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

自动宽度为 a

a {
width: auto;
}

【讨论】：