CSS background-position 属性示例 -- CSS教程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<title>CSS background-position 属性示例 -- CSS教程</title>
		<style type="text/css" media="all">
			body 
			{ 
				background-image:url('/images/list-orange.png');
				background-repeat:no-repeat;
			}

p 
			{ 
				background-image:url('/images/list-orange.png');
				background-position:right bottom ;
				background-repeat:no-repeat;
				border:1px solid black;
				width:200px;height:200px;
			}

div 
			{ 
				background-image:url('/images/list-orange.png');
				background-position:50% 20% ;
				background-repeat:no-repeat;
				border:1px solid black;
				width:200px;height:200px;
			}
		</style>
	</head>

<body>
		<span>梦之都 <a href="http://www.dreamdu.com/css/">CSS教程</a>,<strong><a href="http://www.dreamdu.com/css/property_background_position/">background-position</a></strong>示例,由于默认值是0% 0%所以左上角显示橙色的点(页面左上角),我是通过橙色点定义了html元素的背景图片的.</span>
		<p>p段落中右下角显示橙色的点.</p>
		<div>div中距左上角x轴50%,y轴20%的位置显示橙色的点.</div>
	</body>
</html>