在CSS中,背景图片的定位方位有3种:
(1)关键字:background-position: top right;
(2)像素:background-position: 0px 0px;
(3)百分比:background-position: 0% 0%;
前两种定位,都是将背景图片左上角的原点,放置在规定的位置。第一种就不介绍了。
设置div区域:
第三种:它的放置规则是,图片本身(x%,y%)的那个点,与背景区域的(x%,y%)的那个点重合。比如,如果放置位置是“20% 10%”,这个点是在图片本身的“20% 10%”的位置上。适合页面缩放的网页中
事例:

背景图片是四个边长为100px的方块叠在一起
加载到网页后,变成下图样子

在网页中先设置四个div区域:
css编写:
像素方法:
百分比方法:
(1)关键字:background-position: top right;
(2)像素:background-position: 0px 0px;
(3)百分比:background-position: 0% 0%;
前两种定位,都是将背景图片左上角的原点,放置在规定的位置。第一种就不介绍了。

第二种:像素定位,css中经常用
设置div区域:
<div class="test"> </div>css编写:
.test { float:left; width:100px; height:100px; position:relative; background: #F3F2E2 url(test.png) no-repeat; background-position: -200px -200px; }这样就可以取到5那个方块了
第三种:它的放置规则是,图片本身(x%,y%)的那个点,与背景区域的(x%,y%)的那个点重合。比如,如果放置位置是“20% 10%”,这个点是在图片本身的“20% 10%”的位置上。适合页面缩放的网页中
事例:

背景图片是四个边长为100px的方块叠在一起
加载到网页后,变成下图样子

在网页中先设置四个div区域:
<div class="box1"> </div> <div class="box2""> </div> <div class="box3"> </div> <div class="box4"> </div>
css编写:
像素方法:
.box1, .box2, .box3, .box4 { float:left; width:100px; height:100px; position:relative; background: #F3F2E2 url(1234.png) no-repeat; } .box1 { background-position:0 0; } .box2 { background-position:0 -100px; } .box3 { background-position:0 -200px; } .box4 { background-position:0 -300px; }
百分比方法:
.box1, .box2, .box3, .box4 { float:left; width:100px; height:100px; position:relative; background: #F3F2E2 url(1234.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%; }
目前有 0 条评论