HTML input type text 文字欄位的背景顏色與背景圖片設計

前面的篇幅我們介紹了關於 input type text 文字欄位的文字顏色修改、邊框顏色、邊框樣式等修改技巧，這一篇將進入修改 input type text 文字欄位的背景顏色以及背景圖片修改技巧，要用到的是 CSS background 的兩個屬性，分別是 background-color 及 background-image。

修改 HTML input type text 文字欄位的背景顏色
<input type="text" style="background-color:pink;" value="粉紅色欄位背景">&nbsp;
<input type="text" style="background-color:yellow;" value="黃色欄位背景">&nbsp;
<input type="text" style="background-color:lightgreen;" value="淺綠色欄位背景">&nbsp;
範例輸出
   
透過 css 的 background-color 製作出三個不同背景顏色的文字輸入欄位，background-color:pink 是粉紅色背景，往又依序為黃色以及淺綠色，這些背景顏色可以透過色碼表來挑選，更詳細的背景顏色設計技巧請參閱：CSS background-color 背景顏色。

修改 HTML input type text 文字欄位的背景圖片
<input type="text" style="background-image:url(圖片網址);width:300px;height:30px;" value="修改文字欄位背景圖片">
範例輸出
修改文字欄位的背景圖片就不是光修改背景顏色這麼簡單，為了讓圖片能夠與欄位的尺寸完美契合，所以要先將欄位的寬度與高度固定下來，以此範例來說，寬度設定為 300px（width:300px;）、高度設定為 30px（height:30px），準備用來當背景的圖片規格也是一樣。透過 css 的 background-image 即可將背景圖片加入至文字欄位，更詳細的用法請參閱：CSS background-image 背景圖片。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012