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