Несколько 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

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

РЕДАКТИРОВАТЬ: Обратите внимание, как я перечитал ваш первоначальный вопрос, кажется, вы можете захотеть градиент над значком. Если это так, вам нужно поменять фоновый код на то, что я дал выше.

Answer 2

Когда вы устанавливаете новое значение для «background-image», оно полностью переопределяет свое предыдущее определение. Только последнее примененное определение будет иметь преимущественную силу.

Я предлагаю вам включать URL-адрес значка для каждого определения фонового изображения.