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

Question

我想在textarea中添加一個背景圖像，與內容一起滾動。 我正在使用HTML / JavaScript / CSS編程，專門用於移動Safari。

我嘗試過各種各樣的東西但似乎沒什么用。 我嘗試將textarea放在圖像的頂部，然后每當滾動textarea時滾動背景圖像。 當我輸入文本時它或多或少都可以正常工作，但原生滾動條（我不想擺脫它）使它在移動Safari上看起來很糟糕。

我嘗試使用contentEditable div容器，但這似乎也引發了問題（再次滾動）。

是否可以使用帶有滾動背景圖像的原生滾動的textarea？

Answer 1

背景圖像可以應用於輸入或文本元素，如下所示：

檢查小提琴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;
}

注意：兩者之間的區別在於div中的內容（假設它的編碼正確）將作為搜索引擎可用文本包含在內，而textarea內容則不包括在內。