HTML 網頁設計筆記
HTML 網頁設計筆記
> HTML button 按鈕背景圖片
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 按鈕設計
HTML button 按鈕背景顏色設計
HTML 回到上一頁按鈕 back button
HTML 清除表單按鈕 button reset
HTML button 按鈕的邊框樣式與顏色設計
分享於 2015-03-01
最新分享主題
HTML div 標籤
HTML span 標籤
HTML element 的基本介紹
HTML Table cellpadding 屬性
HTML Table cellspacing 屬性
HTML Table rowspan 屬性
HTML Table colspan 屬性
HTML iframe 框架設計
修改按鈕大小 Set HTML button size
HTML button disabled 停用按鈕
累積熱門文章
HTML input type text 表單文字欄位
HTML input type password 表單密碼欄位
透過 colspan 合併 HTML Table 表格欄位
HTML select option 下拉選單設計
修改按鈕大小 Set HTML button size
HTML 表格設計篇 TABLE
如何設計網頁跑馬燈
HTML Form 表單設計
圖片型網頁跑馬燈設計
HTML input type hidden 表單隱藏欄位應用
今日熱門文章
修改 HTML Table 表格文字大小
如何設計網頁跑馬燈
HTML 表格設計篇 TABLE
圖片型網頁跑馬燈設計
滑鼠移入就停止的網頁跑馬燈設計
透過 rowspan 合併 HTML Table 表格欄位
修改按鈕大小 Set HTML button size
HTML Form 表單設計
修改 HTML Table 表格邊框顏色
HTML Table 表格邊框樣式
HTML 網頁設計是網際網路的基礎標準,透過簡單的 HTML 語法,輕鬆製作出精美的網頁,想學習 HTML 網頁設計嗎?歡迎常來看我的 HTML 網頁設計學習筆記,陸續分享更多技巧。