如何正确定位三部分背景

Question

我尝试了什么：

#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，并且由于纸张部分是透明的，因此在这些透明部分中可以看到纸张中间2。有关说明，请注意纸张的顶角（或参见live version）

Answer 1

最好将#page-text划分为三个垂直部分。没有额外HTML的好方法是在:before上使用:after和#page-text，保留顶部和底部背景图像，并分别放在#page-text的上方和下方。这样，您可以让中间背景图像尽可能多地重复，而不会干扰顶部和底部背景图像。您也不需要CSS3，从而提供更向后兼容的解决方案。