|
CSS中背景background-position负值定位深入理解(1) CSS技巧">CSS中背景定位background-position负值一直是不好理解的难点，一方面用的比较少，另一方面的理解的不够深入，今天花了点时间认真的思考了，把我的心得写出来．
下面是我要用到的一个背景图：
代码如下：
<!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(http://www.webjx.com/upfiles/20070828/20070828191216_01.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>
预览效果请参阅：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
| 
