CSS中背景background-position负值定位

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

本篇是上篇background-position定位的补充。下面是我要用到的一个背景图：

 


代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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> 
x:0,<span>y:0</span> 
</div> 
<div> 
x:-50px,<span>y:-50px</span> 
</div> 
<div> 
x:100px,<span>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;这样就定义好了,在图上的量法就看下图（这张图相当于你用的效果图或称设计图），记住这张图相信你一定能掌握背景图负值的方法了。

 

来自淘代码转载请注明

posted @ 2016-07-04 12:22  淘代码  阅读(427)  评论(0)  编辑  收藏  举报