CSS给网页上的评论文本框加上提醒功能背景图片

admin

2010年3月12日 22:43 本文热度 8054

在不少的网站中，大家都发现它的评论框中有一个带提醒功能的图片，这是怎么弄的呢？其实用css就可以轻松实现，只用给textarea增加background属性，然后引入一张背景图，设置no-repeat right bottom，意思是不重复，靠右下对齐，是不是挺简单的？
[code]文本框加上提醒背景

[/code]
<div align="right" style="color:darkgrey;font-size:12px;"><br>该文章在 2010/3/12 22:44:25 编辑过</div></div>

</div>
		</td>
		<td id="td_rightpart" class="vtclgntop">
			<div class="closely boxborder">
				
				<div class="ultitle">关键字查询</div>
				<div class="searchitem">
					
					<div><label><input type="checkbox" name="searchword" value="css"  checked/>css<label></div>
					
					<div><label><input type="checkbox" name="searchword" value="图片"  checked/>图片<label></div>
					
					<div><label><input type="checkbox" name="searchword" value="网页"  checked/>网页<label></div>
					
					<div><label><input type="checkbox" name="searchword" value="文本框" />文本框<label></div>
					
					<div><label><input type="checkbox" name="searchword" value="文本" />文本<label></div>
					
					<div><label><input type="checkbox" name="searchword" value="背景" />背景<label></div>
					
					<div><label><input type="checkbox" name="searchword" value="评论" />评论<label></div>
					
					<div><label><input type="checkbox" name="searchword" value="功能" />功能<label></div>
					
					<div><label><input type="checkbox" name="searchword" value="提醒" />提醒<label></div>
					<input type="button" value="查询" class="button_40px" onclick="search_other_keyword()"/>
				</div>
				
				<div class="ultitle">相关文章</div>
				<div id="closely_list_area"><div style="padding:20px;text-align:center;">正在查询...</div></div>
			</div>
			<div class="fixedtop">
			<div class="gg ggshadow">
	<a href="http://erp.clicksun.cn" target="_blank"><img src="images/gg1erp300_120.png" alt="点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。" title="点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。"/></a>
</div>
<div class="gg ggshadow">
	<a href="http://pms.clicksun.cn" target="_blank"><img src="images/gg2pms300_120.png" alt="点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。" title="点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。"/></a>
</div>
<div class="gg ggshadow">
	<a href="http://wms.clicksun.cn" target="_blank"><img src="images/gg3wms300_120.png" alt="点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。" title="点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。"/></a>
</div>
<div class="gg ggshadow">
	<a href="http://oa.clicksun.cn" target="_blank"><img src="images/gg4oa300_120.png" alt="点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。" title="点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。"/></a>
</div>
			</div>
		</td>
	</tr>
	</table>
</div>
<script type="text/javascript" src="js/prism.js"></script>
<script type="text/javascript">

Prism.hooks.add('before-sanity-check', function (env) {
  env.element.innerHTML = env.element.innerHTML.replace(/<br>/g, '\n');
  env.code = env.element.textContent;
});