如何將背景圖像與textarea中的文本一起滾動？

Question

我知道這是有點難以解釋，但你會看到我的代碼下面的想法，情況是我有一個textarea有一個線條背景（像筆記本和圖像風格重複），也是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：

​​

---

編輯

另一個better compatibility solution（僅瀏覽器中，這是行不通的Opera移動和歌劇迷你）將不會使用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; 
}