HTML button 按鈕背景圖片

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

HTML button 按鈕背景圖片範例語法
功能: 在新視窗開啟程式碼文字檔
範例的顯示效果
我們在範例中使用了 style 來宣告一段 CSS 的樣式,然後在其中使用 background-image 屬性,把一個準備好的 120x30 大小的背景圖片,插入到按鈕的背景中,同時也把按鈕的大小設定為寬 120px、高 30px 讓其與背景圖片的尺寸相吻合,這樣就能顯示出漂亮的按鈕背景圖片囉!同樣的手法也可以用來修改 input type submit 的按鈕。

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

更多 HTML 按鈕設計
分享於 2015-03-01