Question

我有一个background-image属性的按钮，设置1）按钮的图标和2）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));
}

Answer 1

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元素以将图标图像放入其中并在图标上单独设置该背景（{ {1}}）和渐变（span） OR ，因为渐变是新的浏览器技术，请将a或:before伪元素设置为位于下方:after标记。类似的东西：

编辑：注意，当我重读原始问题时，您可能希望图标上方的渐变。如果是这样，您需要将背景代码替换为我上面给出的内容。

Answer 2

为“background-image”设置新值时，它会完全覆盖其先前的定义。只应用最后一个定义。

我建议您为每个背景图片定义添加图标网址。

多个CSS3背景，替换顶层

2 个答案: