列表上的背景图片项目

Question

认为它是一个简单的。

我正在一个网站上工作。 设计是here

我打了一个小障碍，如何做页脚策略|管理|复苏。

由于每个项目都有与之关联的背景图像，我如何定位背景图像以使其位于列表项的最底部。我试过background: bottom center;

但它似乎只是把它推后。

对此的任何帮助表示赞赏。

Answer 1

是这样的吗？我使用了一些我发现的红色方块的随机图像，这可能很容易成为你的图像。

http://jsfiddle.net/chricholson/5NC7L/

http://jsfiddle.net/chricholson/5NC7L/1/

HTML：

<ul> 
    <li>link</li> 
    <li>link</li> 
    <li>link</li> 
</ul> 

CSS：

li { 
    padding: 0 0 50px 0; 
    display: inline-block; 
    background: url('http://www.martin.com/color/small/red305.1.gif') no-repeat bottom center; 
} 

Answer 2

我可能会做像这样：

a.strategy { border-bottom: 44px solid #CC7A16;} 
a.management { border-bottom: 44px solid #00718C;} 
a.recovery { border-bottom: 44px solid #954256;}