div+css背景图⽚的定位取图⽅法
CSS中背景图⽚定位⽅法
关键字: css中背景图⽚定位⽅法
在CSS中，背景图⽚的定位⽅位有3种：
1）关键字：background-position: top right;
2）像素：background-position: 0px 0px;
3）百分⽐：background-position: 0% 0%;
上⾯这三句语句，都将图⽚定位在背景的左上⾓，表⾯上看效果是⼀样的，实际上第三种定位机制与前两种完全不同。
前两种定位，都是将背景图⽚左上⾓的原点，放置在规定的位置。请看下⾯这张图，规定的位置是“20px 10px”和"60px 50px"，都是图⽚的原点在那个位置上，图中⽤X表⽰。
但是第三种定位，也就是百分⽐定位，不是这样。它的放置规则是，图⽚本⾝（x%,y%）的那个点，与背
景区域的（x%,y%）的那个点重合。⽐如，如果放置位置是“20% 10%”，实际结果如下图，可以看到这个点是在图⽚本⾝的“20% 10%”的位置上。
下⾯是⼀个有趣的例⼦。
css实现垂直水平居中背景图⽚是四个边长为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% 33.33333%;
}
.box3 {
background-position:0% 66.66666%;
}
.box4 {
background-position:0% 100%;
}可以看到第⼆和第三个⽅块的设置，并不是⼀般想象中的“0% 25%”和“0% 75%”。
不过说实话，这个例⼦⽤像素设置法更容易⼀些。使⽤百分⽐设置的主要优势在于，当页⾯缩放的时候，背景图⽚也会跟着⼀起缩放。
/*盒⼦的css样式*/
#box{ width:500px; height:180px; border:1px #ccc solid;}
/*全部重复背景*/
.repeat{ background:url(bg.gif);}
/*⽔平⽅向重复*/
.repeatx{ background:url(bg.gif) repeat-x;}
/*垂直⽅向重复*/
.repeaty{ background:url(bg.gif) repeat-y;}
/*背景不重复*/
.norepeat{ background:url(bg.gif) no-repeat;}
/*背景左侧中间对齐*/
.
left{ background:url(bg.gif) no-repeat left center;}
/*背景右侧中间对齐*/
.right{ background:url(bg.gif) no-repeat right center;}
/*图⽚背景⽔平⽅向和垂直⽅向都居中*/
.center{ background:url(bg.gif) no-repeat center center;}
/*圆⼼是左侧上部的那个点距离⽔平⽅向50px 垂直⽅向20px*/ .dingwei{ background:url(bg.gif) no-repeat 50px 20px;}

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