使用随文本滚动的背景设计 Textarea 样式? [英] Styling Textarea with Background that Scrolls with Text?
问题描述
我正在尝试创建一个带有记事本背景的 textarea(如下所示:http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/) 但我在那个例子中遇到了同样的问题当文本到达超过高度的多行并且能够滚动时，背景不会随之滚动，所以它看起来很糟糕，只有文本漂浮在所有行上.有什么方法可以让背景随着文本滚动而移动，看起来像真正的纸上书写?
也许:
<头><风格>#fake_textarea{宽度:925px；最小高度:100%；背景重复:重复-y；背景:网址(http://www.artsinmotion.net/notebook_paper.jpg)；填充左:100px;字体系列:arial;}#包装器{宽度:1025px；高度:500px；溢出:自动；}</风格><身体><div id='包装器'><div id='fake_textarea' contenteditable></div></html>
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?
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>
这篇关于使用随文本滚动的背景设计 Textarea 样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
