我们知道background-position的取值可以是关键字、像素或百分比等,但不可以将像素或百分比等单位与关键字混合使用,这样可能会导致css失效。尤其要说的一点是,如果应用百分比的话,background-position: 0, 20%; ,这个20%是图片上距离左上角的20%的点,定位到父元素上距离左上角20%的位置。
正是因为这个特性,我们才可以做一些特别的效果。比如说一有一个个网站创造出的有远近效果的背景 。
这个背景是一些树叶,当我们将窗口的大小改变时,我们可以发现叶子的移动速度不同,给人一种有远近的感觉。它的做法给body, .middle .fore分别设置背景图片叶子,并将它们的background-position水平值分别设置为20%,40%和150%,从而达到想要的效果。
以下为关键部分html及css的代码。
<body>
<div class="middle">
<div class="fore">
/*其他内容*/
</div>
</div>
</body>
body{
background: url(image.png) repeat-x 20% 0;
background-color: #d3ff99;
}
.middle{
background: url(image.png) repeat-x 40% 0;
background-color: transparent;
}
.fore{
background: url(image.png) repeat-x 150% 0;
background-color: transparent;
}