如何正确定位由三部分组成的背景

我试了一下：如何正确定位由三部分组成的背景

#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; 
}

不幸的是，重复的部分重复了遍＃页文本和自纸顶部部分是透明的，纸中间2可见在那些透明的部分。为了进行说明，请注意纸张的顶角（或参见live version） background screenshot

来源

2014-02-23 Josef

在这个问题中看到第二个anser：http://stackoverflow.com/questions/5427371/multiple-background-images-and-a-background-color/5427455#5427455。这可能会给你一个提示。我建议你将实际的文本包裹在另一个div中，这样你就可以摆脱大的填充。 – mainguy

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

来源

2014-02-23 13:05:51

如何正确定位由三部分组成的背景

回答

相关问题