⽹站图⽚定位代码html5,CSS中背景图⽚的定位
在CSS中，背景图⽚的定位⽅位有3种：
(1)关键字：background-position: top right;
(2)像素：background-position: 0px 0px;
(3)百分⽐：background-position: 0% 0%;
前两种定位，都是将背景图⽚左上⾓的原点，放置在规定的位置。第⼀种就不介绍了。[break]
第⼆种：像素定位，css中经常⽤ 假如要取图中5号红⾊⽅块，边长位100px，图⽚为test.png那么代码
如下：
设置div区域：
.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区域：
css编写：
像素⽅法：
.box1, .box2, .box3, .box4 {
float:left;
width:100px;
height:100px;css中的position属性
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%;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。