css背景定位技术

    我先做个例子,只有尝试才能理解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等组合方式。

你可能感兴趣的:(css)