javascript - 如何创建带有滚动背景图像的可滚动文本区域？

Question

我想在与内容一起滚动的文本区域中添加背景图像。我正在专门为移动 Safari 使用 HTML/JavaScript/CSS 进行编程。

我尝试了多种方法，但似乎没有任何效果。我尝试将文本区域放在图像的顶部，然后在滚动文本区域时滚动背景图像。当我输入文本时，它或多或少地工作得很好，但 native 滚动条(我不想摆脱它)让它在移动 Safari 上看起来很糟糕。

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

是否可以让带有滚动背景图像的原生滚动文本区域？

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 中的内容(假设其编码正确)将作为搜索引擎可用文本包含在内，而文本区域内容则不会。