我尝试过的:
#page-text {
background-image:
url(./images/paper-top.png),
url(./images/paper-bottom.png),
url(./images/paper-mid-2.png);
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: 0 0, 0 100%, top 10px;
background-size: 100% auto;
}
不幸的是,重复部分在整个 #page-text 中重复,并且由于 paper-top 是部分透明的,因此 paper-mid-2 在那些透明部分中可见。对于插图,请注意纸张的顶 Angular (或参见 live version )
最佳答案
您最好将 #page-text
分成三个垂直部分。一个不需要额外 HTML 的好方法是在 #page-text
上使用 :before
和 :after
,保持顶部和底部背景图片和分别放在#page-text
的上方和下方。这样,您可以让中间的背景图像根据需要重复,而不会干扰顶部和底部的背景图像。然后您也不需要 CSS3,从而提供了一个更加向后兼容的解决方案。
关于css - 如何正确定位三部分背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21968087/