李的背景图象在ul的背景图象下

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高度