下面是我要用到的一个背景图：
代码如下：
复制代码代码如下:
<!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" lang="gb2312">
<head>
<style type="text/css" >
<!--
.style1,.style2,.style3{
float:left;
width:162px;
height:162px;
background:#CCCCCC url(/jiaocheng/UploadFiles/200804/2008041122582457.gif) 0 0 no-repeat;
border:1px dotted #999999;
color:red;
margin-right:10px;
}
.style2{
background-position:-50px -50px;
}
.style3{
background-position:100px 100px;
}
.blue{
color:blue;
}
-->
</style>
</head>
<body>
<div class="style1">
x:0,<span class="blue">y:0</span>
</div>
<div class="style2">
x:-50px,<span class="blue">y:-50px</span>
</div>
<div class="style3">
x:100px,<span class="blue">y:100px</span>
</div>
</body>
</body>
</html>
HTML页中是162*162的灰色背景DIV块并加入三种不同位置的背景图片，
在浏览器中看到的效果：
从上图可以看到：当为background-position:0 0;时图片的左上角与DIV的左上角是重合的，当我们定位于background-position:-50px -50px;时发现图片向左、上移动了，也就以DIV的左上角为中心，图向左移动了50PX，向上也移动了50PX．第三个示例采用的都是正值，可以解解释为图向右、向下移动的效果．这个应该是好理解的．
总结一下就是以上都是以DIV的0，0点为参考点图片移动，如果把DIV区解释为一个坐标轴图，向左，上都为负，向右，下为正值．
好象说这么多你也记不住，那我就告诉你，你应该记住什么吧！
在实践中多数情况是知道一个图的位置要如上图中那个黄色的点，我们应该在效果图上量出它的长度得出两个值都是150PX,那我们定义图的位置就要写background-position:-150px -150px;这样就定义好了,在图上的量法就看下图（这张图相当于你用的效果图或称设计图），记住这张图相信你一定能掌握背景图负值的方法了。
![CSS中背景background-position负值定位深入理解[图文]](/UploadFiles/2021-03-30/2338480.gif)
代码如下：
复制代码代码如下:
<!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" lang="gb2312">
<head>
<style type="text/css" >
<!--
.style1,.style2,.style3{
float:left;
width:162px;
height:162px;
background:#CCCCCC url(/jiaocheng/UploadFiles/200804/2008041122582457.gif) 0 0 no-repeat;
border:1px dotted #999999;
color:red;
margin-right:10px;
}
.style2{
background-position:-50px -50px;
}
.style3{
background-position:100px 100px;
}
.blue{
color:blue;
}
-->
</style>
</head>
<body>
<div class="style1">
x:0,<span class="blue">y:0</span>
</div>
<div class="style2">
x:-50px,<span class="blue">y:-50px</span>
</div>
<div class="style3">
x:100px,<span class="blue">y:100px</span>
</div>
</body>
</body>
</html>
HTML页中是162*162的灰色背景DIV块并加入三种不同位置的背景图片，
在浏览器中看到的效果：
![CSS中背景background-position负值定位深入理解[图文]](/UploadFiles/2021-03-30/2338481.gif)
从上图可以看到：当为background-position:0 0;时图片的左上角与DIV的左上角是重合的，当我们定位于background-position:-50px -50px;时发现图片向左、上移动了，也就以DIV的左上角为中心，图向左移动了50PX，向上也移动了50PX．第三个示例采用的都是正值，可以解解释为图向右、向下移动的效果．这个应该是好理解的．
总结一下就是以上都是以DIV的0，0点为参考点图片移动，如果把DIV区解释为一个坐标轴图，向左，上都为负，向右，下为正值．
好象说这么多你也记不住，那我就告诉你，你应该记住什么吧！
在实践中多数情况是知道一个图的位置要如上图中那个黄色的点，我们应该在效果图上量出它的长度得出两个值都是150PX,那我们定义图的位置就要写background-position:-150px -150px;这样就定义好了,在图上的量法就看下图（这张图相当于你用的效果图或称设计图），记住这张图相信你一定能掌握背景图负值的方法了。
![CSS中背景background-position负值定位深入理解[图文]](/UploadFiles/2021-03-30/2338482.gif)
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
暂无“CSS中背景background-position负值定位深入理解[图文]”评论...
更新日志
2024年11月15日
2024年11月15日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路：年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减：亲亲环节没了！
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]