HTML&CSS——CSS中背景background-position负值定位深入理解[图文]

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

HTML&CSS——CSS中背景background-position负值定位深入理解[图文]_第1张图片


代码如下: 

复制代码
代码如下:

<!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块并加入三种不同位置的背景图片,
  在浏览器中看到的效果:

HTML&CSS——CSS中背景background-position负值定位深入理解[图文]_第2张图片



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

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

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

HTML&CSS——CSS中背景background-position负值定位深入理解[图文]_第3张图片

你可能感兴趣的:(HTML&CSS——CSS中背景background-position负值定位深入理解[图文])