DivCSS实例教程：Form表单内textarea背景图片设置
网站开发的过程不可避免的会遇到表单元素的应用。表单form元素是网页里面一种相对特殊的元素，它用来搜集信息。表单一般有多个元素组成，最常见的有，文本框、单选或复选、下拉菜单、文本域和按钮等。
为了美化页面，常常将表单元素设计在不同的外观样式。可以给文本框设置不同的背景色、边框和文字颜色等，文本域一般是一个较大的区域，可以加入背景图片予以美化。前几日，有一位朋友在进行文本域textarea背景图片设置的时候遇到了一点问题。背景图片并不是静止的，会随着文本域内的内容增加而出现位置上的变化。下面开始一步一步加以说明。
首先来看一下本实例的效果。
这是一个简单的表单，由两个元素组成。上部是文本域textarea，下部是一个提交按钮input。编写XHTML代码如下。
Example Source Code [www.52css.com]
<form action="http://www.52css.com/" method="post" id="MrJin" name="MrJin">
<textarea name="MrJin_52CSS" id="MrJin_52CSS" cols="" rows=""></textarea>
<input name="Submit" type="submit" value="Submit" />
</form>
<p>
DivCSS实例教程：Form表单内textarea背景图片设置 -
<a href="http://www.52CSS.com/" target="_blank">www.52CSS.com</a>
</p>
建立一个表单form，并赋予其id为MrJin。在其内部建立一个文本域textarea元素，赋予id为MrJin_52CSS。最后放置一个提交按钮。
下面开始CSS样式定义，编码如下。
Example Source Code [www.52css.com]
#MrJin_52CSS {
display:block;
width:350px;
height:240px;
background:url(bg.jpg) no-repeat 10px 30px;
border:1px solid #06f;
padding:5px;
}
将textarea元素转换为块元素，设置其宽度和高度，定义背景图片为bg.jpg，不重复，定位于x轴10px、y轴30px。设置边框为1像素的实线，颜色为#06f。为了使输入文本与边框之间有一定的距离，设置内边距为5px。
下面是本案例所用到的背景图片：
看此时表单的运行效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DivCSS实例教程：Form表单内textarea背景图片设置 - www.52CSS.com</title><br />
<style type="text/css">
#MrJin_52CSS {
display:block;
width:350px;
height:240px;
background:url(http://www.52css.com/attachments/month_0804/c20084189415.jpg) no-repeat 10px 30px;
border:1px solid #06f;
padding:5px;
}
</style>
</head>
<body>
<form action="http://www.52css.com/" method="post" id="MrJin" name="MrJin">
<textarea name="MrJin_52CSS" id="MrJin_52CSS" cols="" rows=""></textarea>
<input name="Submit" type="submit" value="Submit" />
</form>
<p>DivCSS实例教程：Form表单内textarea背景图片设置 - <a href="http://www.52CSS.com/" target="_blank">www.52CSS.com</a></p>
</body>
</html>
运行上面的代码，试着在文本域textarea内输入文字，多敲几个换行回车的时候发现，背景图产生了移动，跑到上面去了。这是因为文本域的面积发生着变化。在IE6和IE7中，都是这样理解的。FF除外。
在背景图片的CSS定义中，有这样一个属性。
background-attachment : scroll | fixed
设置或检索背景图像是随对象内容滚动还是固定。
scroll: 背景图像是随对象内容滚动
fixed:背景图像固定
在本案例中，希望背景图像是固定的，所以是：
background-attachment:fixed;
将此属性的定义加入到上面的代码中，再查看运行效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DivCSS实例教程：Form表单内textarea背景图片设置 - www.52CSS.com</title><br />
<style type="text/css">
#MrJin_52CSS {
display:block;
width:350px;
height:240px;
background:url(http://www.52css.com/attachments/month_0804/c20084189415.jpg) no-repeat 10px 30px;
background-attachment:fixed;
border:1px solid #06f;
padding:5px;
}
</style>
</head>
<body>
<form action="http://www.52css.com/" method="post" id="MrJin" name="MrJin">
<textarea name="MrJin_52CSS" id="MrJin_52CSS" cols="" rows=""></textarea>
<input name="Submit" type="submit" value="Submit" />
</form>
<p>DivCSS实例教程：Form表单内textarea背景图片设置 - <a href="http://www.52CSS.com/" target="_blank">www.52CSS.com</a></p>
</body>
</html>
现在问题得到了解决，在IE6、IE7和FF中得到了基本一致的效果。输入很多文字也不会出现背景图片位移的情况了。
虽然在个别浏览器中存在着一定的差异，但不影响正常使用了。
网站开发的过程不可避免的会遇到表单元素的应用。表单form元素是网页里面一种相对特殊的元素，它用来搜集信息。表单一般有多个元素组成，最常见的有，文本框、单选或复选、下拉菜单、文本域和按钮等。
为了美化页面，常常将表单元素设计在不同的外观样式。可以给文本框设置不同的背景色、边框和文字颜色等，文本域一般是一个较大的区域，可以加入背景图片予以美化。前几日，有一位朋友在进行文本域textarea背景图片设置的时候遇到了一点问题。背景图片并不是静止的，会随着文本域内的内容增加而出现位置上的变化。下面开始一步一步加以说明。
首先来看一下本实例的效果。
这是一个简单的表单，由两个元素组成。上部是文本域textarea，下部是一个提交按钮input。编写XHTML代码如下。
Example Source Code [www.52css.com]
<form action="http://www.52css.com/" method="post" id="MrJin" name="MrJin">
<textarea name="MrJin_52CSS" id="MrJin_52CSS" cols="" rows=""></textarea>
<input name="Submit" type="submit" value="Submit" />
</form>
<p>
DivCSS实例教程：Form表单内textarea背景图片设置 -
<a href="http://www.52CSS.com/" target="_blank">www.52CSS.com</a>
</p>
建立一个表单form，并赋予其id为MrJin。在其内部建立一个文本域textarea元素，赋予id为MrJin_52CSS。最后放置一个提交按钮。
下面开始CSS样式定义，编码如下。
Example Source Code [www.52css.com]
#MrJin_52CSS {
display:block;
width:350px;
height:240px;
background:url(bg.jpg) no-repeat 10px 30px;
border:1px solid #06f;
padding:5px;
}
将textarea元素转换为块元素，设置其宽度和高度，定义背景图片为bg.jpg，不重复，定位于x轴10px、y轴30px。设置边框为1像素的实线，颜色为#06f。为了使输入文本与边框之间有一定的距离，设置内边距为5px。
下面是本案例所用到的背景图片：
看此时表单的运行效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DivCSS实例教程：Form表单内textarea背景图片设置 - www.52CSS.com</title><br />
<style type="text/css">
#MrJin_52CSS {
display:block;
width:350px;
height:240px;
background:url(http://www.52css.com/attachments/month_0804/c20084189415.jpg) no-repeat 10px 30px;
border:1px solid #06f;
padding:5px;
}
</style>
</head>
<body>
<form action="http://www.52css.com/" method="post" id="MrJin" name="MrJin">
<textarea name="MrJin_52CSS" id="MrJin_52CSS" cols="" rows=""></textarea>
<input name="Submit" type="submit" value="Submit" />
</form>
<p>DivCSS实例教程：Form表单内textarea背景图片设置 - <a href="http://www.52CSS.com/" target="_blank">www.52CSS.com</a></p>
</body>
</html>
运行上面的代码，试着在文本域textarea内输入文字，多敲几个换行回车的时候发现，背景图产生了移动，跑到上面去了。这是因为文本域的面积发生着变化。在IE6和IE7中，都是这样理解的。FF除外。
在背景图片的CSS定义中，有这样一个属性。
background-attachment : scroll | fixed
设置或检索背景图像是随对象内容滚动还是固定。
scroll: 背景图像是随对象内容滚动
fixed:背景图像固定
在本案例中，希望背景图像是固定的，所以是：
background-attachment:fixed;
将此属性的定义加入到上面的代码中，再查看运行效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DivCSS实例教程：Form表单内textarea背景图片设置 - www.52CSS.com</title><br />
<style type="text/css">
#MrJin_52CSS {
display:block;
width:350px;
height:240px;
background:url(http://www.52css.com/attachments/month_0804/c20084189415.jpg) no-repeat 10px 30px;
background-attachment:fixed;
border:1px solid #06f;
padding:5px;
}
</style>
</head>
<body>
<form action="http://www.52css.com/" method="post" id="MrJin" name="MrJin">
<textarea name="MrJin_52CSS" id="MrJin_52CSS" cols="" rows=""></textarea>
<input name="Submit" type="submit" value="Submit" />
</form>
<p>DivCSS实例教程：Form表单内textarea背景图片设置 - <a href="http://www.52CSS.com/" target="_blank">www.52CSS.com</a></p>
</body>
</html>
现在问题得到了解决，在IE6、IE7和FF中得到了基本一致的效果。输入很多文字也不会出现背景图片位移的情况了。
虽然在个别浏览器中存在着一定的差异，但不影响正常使用了。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
