您的位置: 首页 > 软件教程 > DIV+CSS教程专题 > CSS中背景background-position负值定位深入理解

CSS中背景background-position负值定位深入理解

8.8分
出处:网络 时间:2011-04-26

您可能感兴趣的话题: CSS  

核心提示:CSS中背景定位background-position负值一直是不好理解的难点,一方面用的比较少,另一方面的理解的不够深入,今天花了点时间认真的思考了,把我的心得写出来 详细出处参考

下面是我要用到的一个背景图:

 

CSS中背景background-position负值定位深入理解


代码如下:
[code]<!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> [/code][button value="复制代码"]

HTML页中是162*162的灰色背景DIV块并加入三种不同位置的背景图片,
  在浏览器中看到的效果:

 

CSS中背景background-position负值定位深入理解

 

  从上图可以看到:当为background-position:0 0;时图片的左上角与DIV的左上角是重合的,当我们定位于background-position:-50px -50px;时发现图片向左、上移动了,也就以DIV的左上角为中心,图向左移动了50PX,向上也移动了50PX.第三个示例采用的都是正值,可以解解释为图向右、向下移动的效果.这个应该是好理解的.
  总结一下就是以上都是以DIV的0,0点为参考点图片移动,如果把DIV区解释为一个坐标轴图,向左,上都为负,向右,下为正值.

  好象说这么多你也记不住,那我就告诉你,你应该记住什么吧!

  在实践中多数情况是知道一个图的位置要如上图中那个黄色的点,我们应该在效果图上量出它的长度得出两个值都是150PX,那我们定义图的位置就要写background-position:-150px -150px;这样就定义好了,在图上的量法就看下图(这张图相当于你用的效果图或称设计图),记住这张图相信你一定能掌握背景图负值的方法了。

 

CSS中背景background-position负值定位深入理解

网友评论
多特网友 2014-02-07 10:52:14 回复
感谢楼主,终于理解了
多特网友 2013-05-22 16:17:40 回复
非常感谢,终于明白了背景图片是什么原理
多特网友 2013-01-14 11:24:01 回复
在这里,找到了我所要的答案
多特网友 2012-12-12 14:44:58 回复
确实不错,
多特网友 2012-07-08 17:31:58 回复
确实不错,
多特网友 2011-06-16 11:38:59 回复
谢谢分享
多特网友 2012-12-12 14:44:58 回复
确实不错,
多特网友 2012-07-08 17:31:58 回复
确实不错,
多特网友 2012-06-13 00:28:08 回复
太感谢了,这我一直苦苦寻找的答案!
多特网友 2014-02-07 10:52:14 回复
感谢楼主,终于理解了
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
HTML的中文叫做“超文本标记语言”。是用来... [详细]
Dreamweaver是网页制作和管理的所见... [详细]