问题
I'm trying to create a textarea with a notepad background (like this: http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/) but I'm running into the same problem in that example of when the text goes to multiple lines past the height and is able to be scrolled through, the background doesn't scroll with it, so it looks bad with just the text floating over all the lines. Is there any way to get the background to move with the text as it scrolls and look like real writing on paper?
回答1:
Maybe:
<html>
<head>
<style>
#fake_textarea{
width:925px;
min-height:100%;
background-repeat: repeat-y;
background: url(http://www.artsinmotion.net/notebook_paper.jpg);
padding-left:100px;
font-family:arial;
}
#wrapper{
width:1025px;
height:500px;
overflow: auto;
}
</style>
</head>
<body>
<div id='wrapper'>
<div id='fake_textarea' contenteditable></div>
</div>
</body>
</html>
回答2:
I do not know if there is a CSS-only method. Here is a way that uses jQuery.
It realigns the background y position with the scroll position.
http://jsfiddle.net/WTCUK/
来源：https://stackoverflow.com/questions/12790831/styling-textarea-with-background-that-scrolls-with-text