如何滚动背景图像和textarea中的文本？ [英] How to scroll a background image together with text in textarea?

问题描述

我知道这有点difficlut解释，但你会得到一个想法通过看到我的代码下面，情况是我有一个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罗马'，时代，衬线; name =cols =rows =>< / textarea> 
< / div> 
  

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

解决方案

.com / gist / 3855623> demo

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

在Firefox中无法使用 - 请参阅此。 p>

HTML ：

 < div& 
< textarea> 
 background-attachment：local; 
<！ - 等等，更多的行 - > 
 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格鲁吉亚，'Times New Roman'，Times，serif; 
} 
  

---

EDIT

另一个 更好的兼容性解决方案 （仅限浏览器中， t工作是Opera Mobile和Opera Mini）不会使用 textarea ，而另一个 div 与 contenteditable 属性。

演示

HTML ：

 < div class ='outer'> 
< div class ='inner'contenteditable ='true'> 
 background-attachment：local; 
<！ - 更多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格鲁吉亚，'Times New Roman'，Times，serif; 
} 
  

I know this is bit difficlut to explain but you'll get an idea by seeing my code below, the situation is I've a textarea which having a line background(something like notebook and the image style is repeat), also the textarea become fixed height for eg. 300px, so my question is when a scroller comes I want to stick the lines with the text, now the text is scrolling and the background lines stay back into a fixed position..

Just tell me your suggetions, is that possible to scroll the background lines together with the text?

Here is my html code..

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

and here you can see the image - { }

解决方案

Use background-attachment: local; after you set your background image.

demo

Works in IE9+, Safari 5+, Chrome and Opera

Does not work in Firefox - see 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;
}

---

EDIT

Another better compatibility solution (only browsers in which this doesn't work are Opera Mobile and Opera Mini) would be not to use a textarea, but another div with a contenteditable attribute.

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

这篇关于如何滚动背景图像和textarea中的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！