html - 多个CSS3背景，替换顶层

Question

我有一个带有 background-image 属性的按钮，该属性设置 1) 按钮的图标和 2) CSS3 背景渐变。我现在想覆盖页面下方的背景渐变，这样图标保持不变，我可以通过简单地覆盖背景渐变来创建许多按钮颜色。

目前有没有办法覆盖多重背景属性的特定图层？

http://gard.me/1ulmH

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));
}

Answer 1

在此处输入代码您需要像原始定义一样为其提供完整的图像用法，因为新定义将覆盖整个背景。所以

.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)); 
}

更新:

如果你真的想单独切换渐变，那么你需要在 a 标签中放置一个 span 元素来放置你的图标图像并设置背景独立于图标 (span) 和渐变 (a) OR 因为渐变是新的浏览器技术，所以在 上做这些: 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...
}

编辑:请注意，当我重新阅读您原来的问题时，您似乎想要图标上方的渐变。如果是这样，你需要把后台代码换成我上面给的。