替 HTML button 按鈕增加背景圖片

HTML button 按鈕預設值是沒有背景圖片的，按鈕本身在不同的瀏覽器呈現出來的樣貌有些許的不同，不過大同小異，網頁設計師通常可以透過替 HTML button 按鈕增加背景圖片的技巧，來提升按鈕本身的視覺效果與增加網頁整體的美觀完整度，那要如何替 HTML button 按鈕增加背景圖片呢？在這裡我們會使用 CSS background-image 屬性來設計，這是個設計網頁元素背景圖片的標準屬性，我們先來看看語法的規則，再套用到範例給各位讀者看效果。

CSS background-image 屬性語法

background-image:url(要使用的背景圖片網址);

CSS 的 background-image 屬性可以透過 url 將背景圖片加入至網頁元素中，當然也可以加入按鈕的背景圖片，需要注意的是為了可以跟按鈕本身的尺寸吻合，圖片大小與按鈕大小要設為一樣，如此一來按鈕的背景圖片才會顯示比較漂亮。

背景圖片屬性的詳細用法請參閱《CSS background-image 背景圖片》篇的完整內容。

替 HTML button 按鈕增加背景圖片的實際範例

範例的視覺效果

範例是一個擁有背景圖片的按鈕，我們所使用的背景圖片尺寸為寬 150px、高 40px，為了讓這張背景圖片可以與按鈕大小完全符合，所以我們也把按鈕的尺寸調整為一樣（width:150px;height:40px;），透過 background-image 屬性把預先準備好的圖片插入為按鈕背景圖片，這樣就完成了，相當的容易，同樣技巧也可以套用在表單送出按鈕 submit 的設計。

更多按鈕設計技巧