Несколько фоновых изображений / градиентов для одного и того же элемента, объявленные в другом выражении в CSS3

Question

Я пытаюсь сделать кое-что с CSS3 ... Я хотел бы установить для группы элементов с классом ".myClass" градиент с -xxx-linear-градиентом (генерируется с помощью colorzilla.com/gradient-редактор для совместимости).Но у каждого из этих элементов с классом ".myClass" есть Id, и в зависимости от Id я хотел бы добавить различные фоновые изображения поверх градиентов (как в многократном фоновом выражении).Примерно так:

.myClass {
    /* linear gradient... */
}

#myId1 {
    background-image: url(img1.png); /* or background: url(...), same result */
}

#myId2 {
    background-image: url(img2.png);
}

Проблема в том, что изображения, определенные с помощью #Ids, заменяют градиент вместо создания нескольких фонов.Я мог бы скопировать CSS-код градиента для каждого идентификатора, а затем иметь несколько фонов, но код совместимости, заданный colorzilla, достаточно велик для градиента, поэтому его копирование в каждый идентификатор сделает код более нечитаемым ...

Идентификаторы имеют приоритет, но мне было интересно, есть ли способ «добавить» второе фоновое изображение вместо его замены.

Если у вас есть идеи, большое спасибо!

Answer 1

Вы не можете использовать несколько фоновых изображений в отдельных фоновых операторах.Если вам нужно несколько фонов, вы должны объявить их все в одном фоновом выражении.Это связано с тем, что в множественных операторах фона механизм рендеринга предполагает, что вы хотите заменить ранее установленный фон новым, а не добавлять к тому, что там есть.Чтобы получить все префиксы вендора, нужно поместить весь CSS3 в отдельный файл.Таким образом, остальное остается читаемым и не смешивается с основным CSS.

Answer 2

К сожалению, в CSS3 до сих пор нет способа сделать это в сжатой форме. Однако вы можете использовать псевдоэлементы для дополнительных фоновых слоев и переопределить их. Вот статья, которая объясняет технику: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Answer 3

Используя псевдоэлементы CSS, вы можете достичь ожидаемого результата, вот пример: http://jsfiddle.net/2s9uj24m/

<div id="alfa">Alfa</div>
<div id="bravo">Bravo</div>
<div id="charlie">Charlie</div>

CSS будет выглядеть так:

div
{   position:relative;
    background:linear-gradient(to top, #aaa, #eee);
}
div::after
{   content:" ";
    position:absolute;
    top:0;right:0;bottom:0;left:0;
}
#alfa::after{background-image:url();}
#bravo::after{background-image:url();}
#charlie::after{background-image:url();}

---

PS: К сожалению, в CSS нет понятия "Массивы" или "Переменные" ... Не было бы замечательно, чтобы CSS-файл выглядел следующим образом:

@variables
{   color1:#aaa;
    color2:#eee;
    var:"the/path/to/an/image.png";
}
.myclass
{   background:linear-gradient(to top, @color1, @color2),url(@var);
    other-general-css-properties-for-that-king-of-elements...
}
#myID
{   @var:"the/path/to/another/image.png";
}
:target
{   @color1:#777;
    @color2:#aaa;
}

Простая возможность иметь переменные для цветов поможет сэкономить время!

Answer 4

Если вы используете меньше CSS, вы можете сделать следующее:

/** 
 * Defines a horizontal gradient, but allows additional image url's to be passed     through the CSS3 compliant browsers to display multiple i
 * image on the one element
 */

.background-gradient-multiple(@start-color, @end-color) {
    .background-gradient-horizontal(@start-color, @end-color);
}
.background-gradient-multiple(@start-color, @end-color, @additional-background) {
    .background-gradient-horizontal(@start-color, @end-color, @additional-background ~ ',');
}
.background-gradient-horizontal(@start-color, @end-color, @additional-background: ~'') {
    background-color: @start-color;
    background-image: @additional-background -moz-linear-gradient(left, @start-color,  @end-color);
    background-image: @additional-background -webkit-gradient(linear, 0 0, 100% 0, from(@start-color), to(@end-color));
    background-image: @additional-background -webkit-linear-gradient(left, @start-color, @end-color);
    background-image: @additional-background -o-linear-gradient(left, @start-color, @end-color);
    background-image: @additional-background linear-gradient(to right, @start-color, @end-color);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@start-color, endColorstr=@end-color, GradientType=0);         
} 

чтобы выполнить это в классе, который вы можете сделать:

.class { .background-gradient-multiple(#000000, #FFFFFF, 'url(images/test.gif) no-repeat top left');  }

Answer 5

CSS3 поддерживает несколько фонов - вы пробовали это?

Answer 6

Попробуй это.замените все background в .myClass на background-color.