多个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背景，替换顶层

回答

相关问题