如何使用滚动背景图像创建可滚动的textarea？

Question

我想将背景图片添加到与内容一起滚动的textarea。我正在使用HTML / JavaScript / CSS编程，专门用于移动Safari。

我尝试了各种各样的东西，但似乎没有任何效果。 我尝试将textarea放在图像的顶部，然后每当滚动textarea时滚动背景图像。当我输入文本时它或多或少都可以正常工作，但原生滚动条（我不想摆脱它）使它在移动Safari上看起来很糟糕。

我尝试使用contentEditable div容器，但这似乎也引发了问题（再次滚动）。

是否可以使用带有滚动背景图像的原生滚动的textarea？

Answer 1

背景图像可以应用于输入或文本元素，如下所示：

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;
}

注意：两者之间的区别在于div中的内容（假设编码正确）将作为搜索引擎可用文本包含在内，而textarea内容则不会。