用户名： 密码： 验证码：           网站地图 高级搜索 RSS订阅 收藏本站
  • 热点通告：
Google
您的位置:首页>>图形设计>>CSS>>阅读资讯：CSS中背景background-position负值定位深入理解

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

[ 来源： | 阅读：次 | 更新日期:2007-8-28 22:59:00 | 评论 0 条 | 我要投稿 ]
CSS中背景定位background-position负值一直是不好理解的难点，一方面用的比较少，另一方面的理解的不够深入，今天花了点时间认真的思考了，把我的心得写出来．
　　下面是我要用到的一个背景图：

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



　　代码如下：

<!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(/upimg/allimg/070828/2259340.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>

字串8


</div>
<div class="style3">
x:100px,<span class="blue">y:100px</span>
</div>
</body>
</body>
</html> 字串7

　　预览效果请参阅： 字串9

字串5

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

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

www.yueluo.net

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负值定位深入理解 yueluo.net


Tags：网页制作,CSS
责任编辑：
上一篇：IE6不支持的CSS选择符  下一篇：JavaScript的9个陷阱及评点
您的评论
用户名： （新注册） 密码： 匿名评论 [所有评论]

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为