HTML textarea 表單多行文字輸入欄位背景圖片設計

HTML textarea 多行文字輸入欄位的背景預設只有白色而沒有圖片，這樣單純的設計適合絕大多數的情況，可是如果網頁本身設計的風格需要在 textarea 的背景增加背景圖片的效果，預設的白色背景就不符合需求，網頁設計師可以利用 CSS 提供的 background-image 屬性來替 HTML 的 textarea 多行文字輸入欄位增加適合的背景圖片，提升整體的視覺效果，設計方式很簡單，兩個基礎語法先熟悉。

基礎語法

HTML textarea 的語法（詳細用法參閱：表單文字輸入欄位 textarea）
<textarea name="欄位名稱" style="欄位顯示樣式設定">欄位文字內容</textarea>
CSS background-image 屬性語法（詳細用法參閱：CSS background-image 背景圖片）
background-color:url(背景圖片網址) ;
我們會在範例中把 CSS 的 background-image 屬性套用到 HTML textarea 的語法中，藉此調整文字欄位內的背景圖片。

HTML textarea 表單多行文字輸入欄位背景圖片設計範例
<style type="text/css">
#T1{
width:300px;
height:200px;
border:1px #ccc solid;
}
#T2{
width:300px;
height:200px;
border:1px #ccc solid;
background-image:url('upload/20150704185839.png');
}
</style>
<textarea id="T1">這是無背景圖片的欄位</textarea>
<textarea id="T2">這是有背景圖片的欄位</textarea>

範例的視覺效果
我們在範例中準備了兩個大小一樣的 textarea 欄位做比較，第一個 textarea 是預設的白色背景顏色，第二個 textarea 則使用了桃紅色背景圖片的設定，然後都有文字寫在裡面，背景圖片不會影響到文字，不過盡量不要使用顏色太深或花樣視覺效果太強烈的背景圖片，以免影響到填寫表擔者的視覺負擔，儘管看似好看卻不實用，挑選適合整體網頁風格的 textarea 背景圖片真的很重要。

更多 textarea 設計技巧
© Copyright webtech.tw Since 2010