css - ul背景图下a li的背景图

Question

如何在 css 中做到这一点？我希望 li 的背景图像在它们所在的 ul 的背景图像下滑动。我试着用 z-index 来做，但没有用。

li{
list-style:none;
background-image:url("2.png");
z-index:-10;
position:relative;
}
ul{
    background-image:url("1.png");
    background-repeat: no-repeat;
    z-index:100;
    position:relative;
}

这可能吗？如果是，它是如何完成的。

更新:图片解释我的意思

Answer 1

我非常喜欢这个想法，我只是为你 jarco 做的。 看起来它不像你想要的那么精确，但它非常相似。

Demo

---

一个小的 div 来显示栏，和 script 让它上下移动

$("ul").mouseenter(function() {
    $("#bar").animate({
        height: $("ul").height()
    });
}).mouseleave( function() {
    $("#bar").animate({
        height: 20
    });
});

Update与高度