CSS - 繼承分層背景圖像

Question

CSS3支持多個背景圖像，例如：

foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); } 

我想能夠次級圖像添加到一個元件與類雖然。

例如，假設您有一個導航菜單。每個項目都有一個背景圖像。當選擇導航項目時，您希望在另一個背景圖像上進行疊加。

我沒有看到「添加」背景圖片而不是重新聲明整個背景屬性的方法。這是一個痛苦，因爲爲了做到這一點與多背景，如果項目具有獨特的圖像，你將不得不爲每個項目反覆寫入基本的bg圖像。

理想我可以做這樣的事情：

li { background: url(baseImage.jpg); } 
li.selected { background: url(selectedIndicator.jpg); } 

而且已經li.selected的最終結果會出現相同的，如果我做的：

li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); } 

更新：我也嘗試過以下沒有運氣（我相信背景不是遺傳..）

li { background: url(baseImage.jpg), none; } 
li.selected { background: inherit, url(selectedIndicator.jpg); } 

Answer 1

我不認爲這是可能的，我thi你必須每次重新定義整個規則。

例如，您可以在具有初始背景的每個項目周圍添加一個「包裝器」，實際項目具有透明背景。然後在選擇它時在項目本身上添加背景。

Answer 2

也就是說，無論如何，不​​是CSS繼承的工作方式。 inherit意味着一個元素應該承擔它的父元素的屬性，而不是影響相同元素的先前聲明。

爲了使CSS更加面向對象，已經提出了你想要的東西，但最接近你將得到的是像SASS這樣的預處理器。

現在，您實際上只需重新聲明第一張圖像和第二張圖像。