列表上的背景圖片項目

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;}