如何正確定位由三部分組成的背景

我試了一下：如何正確定位由三部分組成的背景

#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

如何正確定位由三部分組成的背景

回答

相關問題