css background-position 图片位置

最新推荐文章于 2022-10-05 21:43:05 发布

最新推荐文章于 2022-10-05 21:43:05 发布 · 407 阅读

文章标签：

#css #浏览器 #background #background-position #position

css 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS背景定位属性background-position的使用方法，包括x、y值的定义、取值方式及其对图片位置的影响，并通过代码示例展示了如何在网页中应用这些属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

浏览器呈现：

原图在附件中