替 HTML button 按鈕增加背景圖片

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

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

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

替 HTML button 按鈕增加背景圖片的實際範例
<input type="button" style="width:150px;height:40px;background-image:url('圖片網址');" value="有背景圖片的按鈕">
範例的視覺效果
範例是一個擁有背景圖片的按鈕,我們所使用的背景圖片尺寸為寬 150px、高 40px,為了讓這張背景圖片可以與按鈕大小完全符合,所以我們也把按鈕的尺寸調整為一樣(width:150px;height:40px;),透過 background-image 屬性把預先準備好的圖片插入為按鈕背景圖片,這樣就完成了,相當的容易,同樣技巧也可以套用在表單送出按鈕 submit 的設計。

更多按鈕設計技巧
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012