css background-position 图片位置 -

yxc_gdut

浏览: 97447 次
性别:
来自: 深圳

最近访客更多访客>>

麦兜猪

q75071852

timorandtm

fxs2005

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

css background-position 图片位置

博客分类：

css 浏览器 background background-position position

css 属性:

background-position: x y;

x、y值可以是left right top bottom center，可以是相对值%，可以是数字。

下面测试代码

<!DOCTYPE HTML>
<html>
  <head>
    <title>bg_image.html</title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
	<style type="text/css">
		ul{list-style:none;margin:0px;padding:0px;}
		li{float:left;}
		.clear{clear:both;}
		.small_image{
			border:1px solid #000;
			margin:20px;
			width:200px;
			height:200px;
			background-image:url(../images/tiancai.jpg);
			background-repeat:no-repeat;
		}
		.large_image{
			border:1px solid #000;
			margin:20px;
			width:200px;
			height:200px;
			background-image:url(../images/text_400px.gif);
			background-repeat:no-repeat;
		}
		.bg_position_left_center{
			background-position:left center;
		}
		.bg_position_50_50{
			background-position:50% 50%;
		}
		.bg_position_-50_-50{
			background-position:-50% -50%;
		}
		.bg_position_20px_20px{
			background-position:20px 20px;
		}
		.bg_position_-20px_-20px{
			background-position:-20px -20px;
		}
		.bg_position_50_20px{
			background-position:50% 20px;
		}
	</style>
  </head>
  
  <body>
    <ul>
    	<li>
		    <p>小图像 left center</p>
		    <div class="small_image bg_position_left_center"></div>
	    </li>
	    <li>
		    <p>小图像 50% 50%</p>
		    <div class="small_image bg_position_50_50"></div>
	    </li>
	    <li>
		    <p>小图像 -50% -50%</p>
		    <div class="small_image bg_position_-50_-50"></div>
	    </li>
	    <li class="clear">
		    <p>小图像 20px 20px</p>
		    <div class="small_image bg_position_20px_20px"></div>
	    </li>
	    <li>
		    <p>小图像 -20px -20px</p>
		    <div class="small_image bg_position_-20px_-20px"></div>
	    </li>
	    <li>
		    <p>小图像 50% 20px</p>
		    <div class="small_image bg_position_50_20px"></div>
	    </li>
	    <li class="clear">
		    <p>大图像 left center</p>
		    <div class="large_image bg_position_left_center"></div>
	    </li>
	    <li>
		    <p>大图像 50% 50%</p>
		    <div class="large_image bg_position_50_50"></div>
	    </li>
	    <li>
		    <p>大图像 20px 20px</p>
		    <div class="large_image bg_position_20px_20px"></div>
	    </li>
	  </ul>
  </body>
</html>

浏览器呈现：

原图在附件中