首页 > 网页设计

CSS中背景图片的定位

发布时间:2010-08-19 12:42:38 来源:星知苑 作者:星之宇

在CSS中,背景图片的定位方位有3种:

(1)关键字:background-position: top right;
(2)像素:background-position: 0px 0px;
(3)百分比:background-position: 0% 0%;

前两种定位,都是将背景图片左上角的原点,放置在规定的位置。第一种就不介绍了。[break]
点击查看原图 


第二种:像素定位,css中经常用

假如要取图中5号红色方块,边长位100px,图片为test.png那么代码如下:

设置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%;
}

相关合集

  • 好玩的烹饪类游戏
好玩的烹饪类游戏

简介:可以在游戏中学习到非常多的烹饪的手法还有用心经营餐厅,各种美味的料理每天都是有着排着队的客人在等着你去制作,精彩的过关还可以收集各种食材料理等等玩法相当的多,还可以建造自己连锁店等,这些都是在烹饪模拟的游戏中可以给玩家一个非常真实的美食制作的环境,而且在画面上也是很精致的质量。