如何防止覆蓋邊框圖像的背景圖像

我正在嘗試將一個衣衫襤褸的寄宿生添加到羊皮紙背景中。這是我的CSS如何防止覆蓋邊框圖像的背景圖像

#wrap 
{ 
    width:52em; 
    margin:30px auto; /* centers the container */ 
    background-image: url(../images/parchment.gif); 
} 
.borderimage #wrap 
{ 
    border-width: 10px; 
    -chrome-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat; 
    -moz-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat; 
    -o-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat; 
    -webkit-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat; 
    border-image: url(../images/parchment_border.png) 10 10 10 10 repeat; 
}

.borderimage類是modernizr的一部分。

渲染時，背景圖像覆蓋寄宿圖像。如果我將背景圖像設置爲無，我會在邊框處看到邊框圖像。幾年前，我做了這個工作，但是它在一段時間之前失敗了。如果是因爲我所做的更改或瀏覽器升級，我不會。網絡搜索沒有發現任何有用的東西。

來源

2013-04-04 curt

試着把background-size: contain;放在#wrap內

來源

2013-04-04 03:54:29 Zendy

它沒有影響。 – curt 2013-04-04 15:52:50

你是否也重複背景？ – Zendy 2013-04-04 23:13:23

我沒有指定重複，但它必須作爲包裝部門可以很長。我原來的modernizr css將背景圖像設置爲none。我認爲這曾經是因爲邊框圖像填充了中心和背景圖像不需要。現在邊框圖像僅顯示在邊框中。 – curt 2013-04-04 23:32:33

如何防止覆蓋邊框圖像的背景圖像

回答

相關問題