CSS第二和第三個背景不顯示

我有一個有3個背景的元素。一個沿x軸在頂部重複一次。第二個應該在左上角顯示一次，在右上角顯示第三個。CSS第二和第三個背景不顯示

但第二和第三個背景沒有顯示。

這裏是CSS：

section.services .container header { 
    background: url('../images/style/header_gradient.jpg'), 
       url('../images/style/header_gradient_cover_left.png'), 
       url('../images/style/header_gradient_cover_right.png'); 
    background-position: left top, left top, right top; 
    background-repeat: repeat-x, no-repeat, no-repeat; 
}

來源

2013-05-22 loxyboi

正如@pzin所提到的，當使用多個背景圖像時，圖像的順序是違反直覺的。它們按照它們列出的相反順序顯示。首先列出的最後一個顯示在最前面。使用簡寫語法來協調它可能會更容易：'background：url（...）no-repeat left top，url（...）no-repeat right top，url（...）repeat-x left top ;' –

這是因爲背景的順序與您的規則中顯示的順序相同。這意味着，第一個始終位於頂端，而最後一個位於其他位置。所以，你應該把第一個作爲最後一個，使得重複在x軸的一個不重疊別人：

section.services .container header { 
    background-image: url('../images/style/header_gradient_cover_left.png'), 
        url('../images/style/header_gradient_cover_right.png'), 
        url('../images/style/header_gradient.jpg'); 
    background-position: left top, right top, left top; 
    background-repeat: no-repeat, no-repeat, repeat-x; 
}

此外，爲了有一個更有條理/更乾淨的代碼，我會改變background到像我一樣，我也是background-image。

來源

2013-05-22 15:29:45 pzin

Thankyou，那工作。 – loxyboi

全部影像相互重疊。嘗試在螢火蟲中逐一禁用，然後檢查

來源

2013-05-22 15:27:58 Ani

此外，爲了有一個更有組織/更乾淨的代碼，我會將背景更改爲background-image，就像我一樣。

請記住，如果元素名稱爲'background-image'而不是'background'，則來自瀏覽器的白色背景可能會覆蓋圖像。

我知道它是更乾淨的代碼，但它不知何故弄亂了我的圖像。

來源

2015-10-31 05:58:50

CSS第二和第三個背景不顯示

回答

相關問題