HTML button 按鈕背景圖片

HTML button 按鈕背景圖片可以利用 CSS 設定背景圖片的 background-image 屬性，將圖片插入到按鈕的背景，配合上按鈕本身的寬度與高度設定，就能顯示出具有背景圖片的漂亮按鈕了。其實傳統的 HTML 本身也具有讓按鈕用圖片顯示的功能，可是效果奇差無比，也不知道為什麼各瀏覽器對於 HTML 預設的圖片按鈕支援程度這麼差勁？最後還是要利用 CSS 的 background-image 屬性才能設計出好看的圖片按鈕。

HTML button 按鈕背景圖片範例語法

功能：在新視窗開啟程式碼文字檔

範例的顯示效果

我們在範例中使用了 style 來宣告一段 CSS 的樣式，然後在其中使用 background-image 屬性，把一個準備好的 120x30 大小的背景圖片，插入到按鈕的背景中，同時也把按鈕的大小設定為寬 120px、高 30px 讓其與背景圖片的尺寸相吻合，這樣就能顯示出漂亮的按鈕背景圖片囉！同樣的手法也可以用來修改 input type submit 的按鈕。

備註：範例中 background-image 的小括號內要填入背景圖片的 url，也就是圖片網址。

更多 HTML 按鈕設計

分享於 2015-03-01