css背景定位技术

qieyi28

浏览: 159088 次
性别:
来自: 杭州

最近访客更多访客>>

twbbb

liudongyang123

ttcool

lijiasanshaoye

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

我先做个例子，只有尝试才能理解CSS定位的使用方法。
这是图片，图片是四个边长为100px的方块叠在一起，要实现横排。

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style>
.box1, .box2, .box3, .box4 {
float:left;
width:100px;
height:100px;
position:relative;
background: #F3F2E2 url(bg.png) no-repeat;
}
.box1 {
background-position:0% 0%;
}
.box2 {
background-position:0% 33.33333%;
}
.box3 {
background-position:0% 66.66666%;
}
.box4 {
　　background-position:0% 100%;
}
</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
</body>
</html>

1）关键字：background-position: top left;
　　2）像素：background-position: 0px 0px;
　　3）百分比：background-position: 0% 0%;
上面这三句语句，都将图片定位在背景的左上角，表面上看效果是一样的，实际上第三种定位机制与前两种完全不同。

请自行按上面3种方式，修改样式。看有什么不同。
我的理解，在这里每个DIV都有固定的大小宽度。当background-position：0px -50px;时。
这里使用的bg.png，已经在以左上角为原点的地方向上走50像素。所以，这种定位通俗点讲就是将图片在一个指定区域内进行拖拉，怎么拖拉图片呢，靠上面写的三种方式。

百分比方式与前两种方式在定位规则上稍有不同。
注意：百分比定位方式没有负数。习惯上用百分比定位只是针对其，是刚好为bg.png的开头或结尾才使用，所以我们经常看到一些样式，这么写0%，50px 或100%，50px等组合方式。

分享到：

spring定时任务 | not in,not exists,left join性能对比

2012-11-21 11:40
浏览 1059
评论(1)
分类:Web前端
查看更多

1 楼 ae6623 2012-11-29

讲的很好！！赞一个，嗯是图片向上滚动了-100px；这就好理解多了。。thanks楼主

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论