HTML textarea 文字輸入欄位背景圖片

替 HTML textarea 文字輸入欄位背景圖片可以使用 css 的 background-image 背景圖片屬性，通常還會搭配上 textarea 的寬度（width）與高度（height）屬性，避免背景圖片與 textarea 的大小不合而變形的情況，本篇介紹將展示如何替 textarea 加入背景圖片的語法及範例效果，讓原本平淡無味的 textarea 變得比較有質感一些，幾乎所有主流的瀏覽器都支援這種寫法。

HTML textarea 文字輸入欄位背景圖片範例

<textarea style="background-image:url(背景圖片);width:600px;height:400px;">
請在這裡輸入文字 ....
</textarea>

呈現效果

範例的重點在開頭 textarea 內的 style 語法，首先 background-image 是用來設定背影圖片的屬性，url 小括號內就是圖片的位置（即網址，最好不要使用外部圖檔，以免產生無法預期的破圖現像），接著設定的寬度為 600px（width：600px;）及高度 400px（height:400px;），這樣設定是因為背景圖片也是同樣的規格，如此一來才能讓準備好的背景圖片完美填滿整個 textarea 文字輸入欄位的範圍，如果你對 textarea 文字欄位語法或 css 的 background-image 屬性用法還不是很熟悉，請參考這兩篇的內容。

使用背景圖片要注意幾個重點，首先是不可以隨意盜用網路上的圖片，要尊重別人的智慧財產權，再來是背景圖片最好不要太過搶眼，淡化效果或是材質圖片都會比完全不處理的照片來得適合，因為太清楚的照片很容易讓網友填寫文字時，產生不舒適感，甚至直接放棄填寫。最後，如果你覺得採用背景圖片太麻煩，還要自己準備圖片，不如直接改背景顏色來得有效率，你可以參考這篇的介紹內容。

HTML textarea 文字輸入欄位背景顏色。

無論是修改 textarea 的背景圖片或背景顏色，都應該盡量與整體網頁風格搭配。

延伸閱讀