带来一篇CSS网页计划：百分比举行背景图片定位

支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
此文为厥后的教程做展垫，转自这儿。百分数定位很成心思，能够完成不凡的效果。

年夜部分人应当习气于利用形貌性词语（left、top、center…）大概数值（20px、1em…）对背景图片定位，百分比大概对照罕用，罕见的有50%、100%等数值。比方但愿背景图片程度居中，间隔容器顶部20px，可使用

background-position:50%20px;

之以是不利用

background-position:center20px;

是由于相似这类形貌性词语和数值混用的情势不被W3C保举。（纯真的形貌性词语组合利用是没有成绩的，比方：background-position:rightbottom;）浏览全文...

利用百分比举行定位的优点是能够使用CSS的盘算功效，到达px定位所难以完成的义务。比方在一个宽高均为300px的容器中，利用

background-position:150px150px;

能够看到背景图片的左上角极点（坐标0,0）定位到了齐容器的中央点（坐标150px,150px）。




而把150px交换为50%，利用

background-position:50%50%;

看到的并非以下的效果



而是如许



可见，CSS盘算出了背景图片的中央点。这也能够注释为何我们在利用

background-position:100%100%;

定位的时分，图片被安排在容器的右下角，而并没有跑出容器。（假如利用background-position:300px300px;的话，背景图片会被移出容器）

一样，假如利用

background-position:20%20%;

会将背景图片的坐标点(20%,20%)定位到容器的坐标点(20%,20%)。

使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。