CSS定位背景图片 background-position_css背景图background-position保持原图-CSDN博客

本文详细解析了CSS中background-position属性的使用方法，包括坐标系统、百分比及像素值的应用，并通过实例展示了如何实现背景图片的精确位置控制。

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

1、使用目的
就是减少http请求次数，节省时间和带宽。
2、background-position参数分析
background-position：x y;一般来说是水平位移和垂直位移。通过%或者像素来定位图片。
3、如何定位？
一般来说：用图片作为背景的时候，css要这样写，以div容器举例子，也可以是body、td、p等的背景，道理一样。
div{ background:#FFF url(image) no-repeat fixed x y;}
这里的background的属性值依次为：
#FFF 背景色：（颜色值，背景图片没有覆盖的地方，或者没有背景图片时表现的背景色）
image 背景图片：（这里是图片的地址）
no-repeat 是否重复：（图片小于容器的大小时，默认会重复排列图片以填满容器，no-repeat表示不重复，只有这个时候后面的定位坐标才有用。）
fixed 背景是否随容器滚动：（有两个可选值，scroll滚动，fixed不滚动，默认是scroll）
x y 背景图像的定位：（只有在no-repeat下定位才有意义）

背景图像定位中我们要明确的几点：
1、x、y分别代表x轴和y轴。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。
2、坐标轴的原点就是对应容器的左顶点（这里就是目前多要定位的上一级元素，记为其父节点元素）。
3、这个坐标的y轴箭头朝下，也就是右下方（容器内部）x y的值才都为正。
4、x y值分别表示背景图片的左顶点相对于坐标原点（也就是容器的左顶点）的值。
5、x y的值可以用百分比或者px来表示。
6、x y也可以用“left、right、top、bottom、center”这五个对齐方式来表示，但注意：用“left、right、top、bottom、center”来表示的时候，应用的是对齐规则，而不是坐标规则。x为left是表示图片的左边和容器的左边对齐，为right的时候表示图片的右边和容器的右边对其，y为top的时候表示图片的顶部和容器的顶部对齐，为bottom时表示图片的底部和容器的底部对齐，x y等于center的时候表示居中对齐。
7、x y用百分比或者px表示的时候，其值可以为负数。我们应用坐标规则就很容易理解负数表示的意义，x为负数时候表示图片左顶点在容器左顶点的左侧，y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。
8、一般来说，图片在容器里的超出部分会自动隐藏。
图片列子：

4、定位特例说明
1.background-position:50% 50%;[这里的百分比是：（容器(container)的宽度—背景图片的宽度）*left百分比这里必须要注意下！！！！！]
等同于left：{容器(container)的宽度—背景图片的宽度}*left百分比，超出的部分隐藏。
等同于right：{容器(container)的高度—背景图片的高度}*right百分比，超出的部分隐藏。
例如：background-position:50% 50%;就是background-position:(1000-2000)*50%px, (500-30)*50%px;即background-position:-500px,235px;也就是背景图片从容器(container)的左上角向左移500px，向下移235px；

5、具体的定位实现

图片：

<!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>图片定位</title>
<style type="text/css">
.icon {
background:url(../images/icon.png) no-repeat
}
.demo1{
width:19px;
height:22px; 
overflow:hidden; 
background-position:-102px -351px; 
display:block; 
margin:50px auto; 
}
.demo2{
width:22px;
height:24px; 
overflow:hidden; 
background-position:-3px -2px; 
display:block; 
margin:50px auto; 
}
.demo3{
width:20px;
height:26px;  
overflow:hidden; 
background-position:-3px -56px; 
display:block; 
margin:50px auto; 
}
.demo4{
width:24px;
height:24px;  
overflow:hidden; 
background-position:-3px -110px;  
display:block; 
margin:50px auto; 
}
.demo5{
width:24px;
height:24px; 
overflow:hidden; 
background-position:-3px -160px;  
display:block; 
margin:50px auto; 
}
</style>
</head>

<body>
<div class="icon demo1"></div>
<div class="icon demo2"></div>
<div class="icon demo3"></div>
<div class="icon demo4"></div>
<div class="icon demo5"></div>
</body>
</html>