10

我知道这有点难以解释,但是通过查看下面的代码,您会有所了解,情况是我有一个带有线条背景的文本区域(类似于笔记本,图像样式重复),文本区域也变成了例如固定高度。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>

在这里你可以看到图像 - { 在此处输入图像描述}

4

1 回答 1

23

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

演示

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

在 Firefox 中不起作用 - 请参阅

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

编辑

另一个更好的兼容性解决方案(仅在其中不起作用的浏览器是 Opera Mobile 和 Opera Mini)将不使用 a textarea,而是div使用具有contenteditable属性的另一个。

演示

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;
}
于 2012-10-08T23:33:02.803 回答