我们知道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;
}
7014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
