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

Question

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

我尝试了很多方法，但似乎没有任何效果。 我尝试将 textarea 放在图像顶部，然后在滚动 textarea 时滚动背景图像。当我输入文本时，它或多或少地工作得很好，但是本机滚动条（我不想摆脱它）使它在移动 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 内的内容（假设编码正确）将作为搜索引擎可用的文本包含在内，而 textarea 内容则不会。