如何正确定位三部分背景

Posted 2023-02-21

【中文标题】如何正确定位三部分背景

【英文标题】：How to properly position a three-part background

【发布时间】：2014-03-24 22:54:12

【问题描述】：

我尝试了什么：

#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。为了说明，请注意论文的顶角（或参见live version）

【问题讨论】：

看看这个问题中的第二个分析器：***.com/questions/5427371/…。这可以给你一个提示。我建议您将实际文本包装在另一个 div 中，这样您就可以摆脱大填充。

【参考方案1】：

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