网站图片定位代码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%”的位置上。适合页面缩放的网页中

事例：