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 屬性用法還不是很熟悉,請參考這兩篇的內容。
使用背景圖片要注意幾個重點,首先是不可以隨意盜用網路上的圖片,要尊重別人的智慧財產權,再來是背景圖片最好不要太過搶眼,淡化效果或是材質圖片都會比完全不處理的照片來得適合,因為太清楚的照片很容易讓網友填寫文字時,產生不舒適感,甚至直接放棄填寫。最後,如果你覺得採用背景圖片太麻煩,還要自己準備圖片,不如直接改背景顏色來得有效率,你可以參考這篇的介紹內容。
無論是修改 textarea 的背景圖片或背景顏色,都應該盡量與整體網頁風格搭配。

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