如何在textarea中将背景图像与文本一起滚动？

Question

我知道这有点难以解释，但你会通过看下面的代码得到一个想法，情况是我有一个有线背景的文本区域（类似于笔记本，图像样式重复）， textarea成为固定高度，例如。 300px，所以我的问题是当一个卷轴来时我想用文字粘贴线条，现在文字滚动，背景线保持回固定位置..

告诉我你的建议，可以将背景线与文字一起滚动吗？

这是我的HTML代码..

<div style="width:500px; height:300px; margin:0px auto; background:#ebebeb;">
<textarea style="width:100%; height:300px; background:url(line.jpg) repeat; line-height:30px; font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif;" name="" cols="" rows=""></textarea>
</div>

在这里你可以看到图像 - { }

Answer 1

设置背景图片后使用background-attachment: local;。

demo

适用于IE9 +，Safari 5 +，Chrome和Opera

在Firefox中不起作用 - 请参阅this。

<强> HTML ：

<div>
    <textarea>
        background-attachment: local;
        <!-- and so on, many more lines -->
        background-attachment: local;
    </textarea>
</div>

<强> CSS ：

div {
    width: 500px;
    margin: 0 auto;
    background: #ebebeb;
}
textarea {
    display: block;
    width: 100%;
    height: 300px;
    background: url(http://i.stack.imgur.com/EN81e.jpg);
    background-attachment: local;
    font: 20px/1.5 Georgia, 'Times New Roman', Times, serif;
}

---

修改

另一个better compatibility solution（只有浏览器不能使用Opera Mobile和Opera Mini）才能使用textarea，而另一个div则使用contenteditable属性。

demo

<强> HTML ：

<div class='outer'>
    <div class='inner' contenteditable='true'>
        background-attachment: local;
                <!-- more stuff -->
        background-attachment: local;
    </div>
</div>

<强> CSS ：

.outer {
    overflow-y: scroll;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    background: #ebebeb;
}
.inner {
    width: 100%;
    min-height: 300px;
    background: url(http://i.stack.imgur.com/EN81e.jpg);
    font: 20px/1.5 Georgia, 'Times New Roman', Times, serif;
}