如何使用滾動背景圖像創建可滾動的textarea？

我想添加一個背景圖片到與內容一起滾動的textarea。我正在編寫專門用於移動Safari的HTML/JavaScript/CSS。如何使用滾動背景圖像創建可滾動的textarea？

我試過各種東西，但似乎沒有任何工作。我嘗試將textarea放置在圖像頂部，然後滾動textarea滾動背景圖像。當我輸入文字時，它的效果或多或少，但本機滾動條（我不想擺脫它）使它看起來像移動Safari中的一個殘骸。

我試過使用contentEditable div容器，但似乎也拋出問題（再次滾動）。

有可能有一個textarea本地滾動與滾動的背景圖像？

來源

2012-08-01 Anthony Tyler

現在檢查我的答案，並讓我知道我是否落後於某個地方 – 2012-08-01 03:02:57

背景圖像可以被施加到輸入或文本元素，如下所示：

check the fiddle jsfiddle

HTML

<div class="outer"> 
    <textarea></textarea> 
    </div>

CSS

.outer { width: 310px; height: 250px; padding: 5px; border: 1px solid #666; -webikit-border-radius: 3px; -moz-border-radius: 3px; overflow:auto;overflow-x:hidden } 

textarea{ 
    background: #fff url('http://www.toddle.com/images/300_words_background.gif') 0 -220px no-repeat; 
    width: 302px;padding:5px; height:99em; 
}

注：的差兩者之間就是那個con在div中的帳篷（假設它編碼正確）將作爲搜索引擎可用文本包含，而textarea內容則不包含在內。

來源

2012-08-01 02:30:58

我看到了background-attachment屬性，但它似乎不適用於我嘗試過的任何瀏覽器。請參閱：http：//jsfiddle.net/wNytU/ – 2012-08-01 02:38:51

哪個版本的瀏覽器是你使用的？ – 2012-08-01 02:39:41

Google Chrome（最新版本）和全新ipad3上的Mobile Safari。 – 2012-08-01 02:45:57

如何使用滾動背景圖像創建可滾動的textarea？

回答

相關問題