css - 如何正确定位三部分背景

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 中重复，并且由于 paper-top 是部分透明的，因此 paper-mid-2 在那些透明部分中可见。对于插图，请注意纸张的顶 Angular (或参见 live version )

Answer 1

您最好将 #page-text 分成三个垂直部分。一个不需要额外 HTML 的好方法是在 #page-text 上使用 :before 和 :after，保持顶部和底部背景图片和分别放在#page-text的上方和下方。这样，您可以让中间的背景图像根据需要重复，而不会干扰顶部和底部的背景图像。然后您也不需要 CSS3，从而提供了一个更加向后兼容的解决方案。