多個CSS3背景，替換頂層

我有一個按鈕，其中background-image屬性設置1）按鈕的圖標和2）CSS3背景漸變。現在我想重寫頁面下方的背景漸變，所以圖標保持不變，我可以通過重寫背景漸變來創建許多按鈕顏色。多個CSS3背景，替換頂層

當前是否有方法來覆蓋多個背景屬性的特定圖層？

HTML：

<a class="newButton blue" href="#">hello world</a>

CSS：

.newButton /* Orange by default */ 
{ 
    margin: 20px; 
    display: inline-block; 
    padding: 12px 20px; 

    background: none; 
    background-repeat: no-repeat; 
    background-position: 9px 5px; 
    background-position: 9px 5px, 0 0; 

    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    border-width: 1px; 
    border-style: solid; 

    font-family: Verdana, Arial, Sans-Serif; 
    text-decoration: none; 
    text-align: center; 

    /* Orange stuff */ 
    color: #FFECEA; 
    border-color: #A03E33; 
    background-position: 0 0; 

    background-color: #E46553; 
    background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -o-linear-gradient(bottom, #D15039 0%, #F27466 100%); 
    background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -moz-linear-gradient(bottom, #D15039 0%, #F27466 100%); 
    background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -webkit-linear-gradient(bottom, #D15039 0%, #F27466 100%); 
    background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -ms-linear-gradient(bottom, #D15039 0%, #F27466 100%); 
    background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -webkit-gradient(linear, left bottom, left top, color-stop(0, #D15039), color-stop(1, #F27466)); 
} 

.newButton.blue { /* Blue */ /* Here I need to overwrite the button background colour */ 
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0B3661), color-stop(1, #0E4479)); 
}

來源

2011-11-25 Chris

enter code here您需要像原始定義一樣給它提供完整的圖像使用，因爲新的定義將覆蓋整個背景。所以

.newButton.blue { 
    background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -webkit-gradient(linear, left bottom, left top, color-stop(0, #0B3661), color-stop(1, #0E4479)); 
}

更新時間：

如果你真的想單獨設置梯度，那麼你需要要麼把一個span元素在a標籤放置您的圖標圖像爲獨立設置的背景（span）和梯度（a）或由於梯度是新瀏覽器技術，因此將:before或:after僞元素設置爲位於a標記下方。喜歡的東西：

a { 
    position: relative; 
    z-index: 1; 
    ...icon related background code here... 
} 
a:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    ...gradient related background code here... 
}

編輯：注意，因爲我重讀你原來的問題，看來你可能想要的圖標上面的梯度。如果是這樣，你需要交換背景代碼，我給了上面的東西。

來源

2011-11-25 14:56:01 ScottS

絕對是一個很好的建議。我不得不改變一些代碼來使它工作，但非常有用。關於唯一的缺點是後備代碼在所有瀏覽器中都能正常工作，現在我不得不放入一些醜陋的IE黑客，仍然是我無法忍受的東西:)謝謝！ – Chris

當您爲「背景圖片」的新價值，充分覆蓋其先前的定義。只有最後的定義適用。

我建議你爲每個背景圖像定義包含圖標url。

來源

2011-11-25 14:55:28

嗯，我希望這不會是這樣的情況:( – Chris

這是我說的同樣的事情，只有幾秒更快，沒有代碼:-)。 – ScottS

@基督。我更新了我的答案，以包含一些解決方案來獨立控制背景，就像你想要的一樣（儘管它需要在不同的元素上）。 – ScottS

多個CSS3背景，替換頂層

回答

相關問題