CSS圖像按鈕樣式

我試圖完成這樣的事情 enter image description here CSS圖像按鈕樣式

凡按鈕都集中在頁面的中間，由50像素

這裏是我做的分離。

HTML

<div class="btn btn_tours"><a href="maps.html">Maps</a><span></span></div> 
    <div class="btn btn_maps"><a href="dbtest.html">DB Test</a><span></span></div> 
    <div class="btn btn_locations"><a href="geolocation.html">Geolocation</a><span></span></div> 
    <div class="btn btn_directions"><a href="accel.html">Accelerometer</a><span></span></div>

CSS

.btn { 
    position: relative; 
    padding: 10px 10px 10px 10px; 
    cursor: pointer; 
    overflow: visible; 
    width:50px; 
    height: 50px; 
} 
.btn_directions{ background: url(http://tinyurl.com/5r6a3jy); no-repeat;} 
.btn_maps{ background: url(http://tinyurl.com/5r6a3jy); no-repeat; } 
.btn_tours{ background: url(http://tinyurl.com/5r6a3jy); no-repeat;} 
.btn_locations{ background: url(http://tinyurl.com/5r6a3jy); no-repeat; }

JSFIDDLE

來源

2011-09-29 raym0nd

「的

不能持有爲時已晚。」 –

這裏簡單例子：http://jsfiddle.net/rgmCc/

來源

2011-09-29 20:55:14

如何縮放按鈕內的圖像？ – raym0nd

您無法縮放背景圖片（僅在CSS3中支持） –

您可以使用「圖片編輯器」（如Photoshop或w/e）打開圖片，並根據需要更改圖片的大小。 – Andrej