多個背景圖像/梯度相同的元素，在不同的聲明中聲明，在CSS3

Question

我想用CSS3做一點小事...我想設置一堆與類「.myClass」的元素梯度帶有-xxx線性漸變（爲了兼容性，使用colorzilla.com/gradient-editor生成）。 但是，這些元素中的每個元素都帶有一個Id，並且根據Id，我想在漸變的頂部添加不同的背景圖像（如在多背景語句中）。 像這樣：

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

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

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

的問題是，與#Ids定義的圖像替換而不是使多個背景的漸變。我可以將漸變CSS代碼複製到每個ID，然後有多個背景，但colorzilla給出的兼容性代碼對於漸變非常巨大，因此將其複製到每個ID中會使代碼更難以讀取...

ID有優先權，但我想知道是否有辦法「添加」第二個背景圖像而不是替換它。

如果您有任何想法，非常感謝！

Answer 1

您不能在單獨的後臺語句中使用多個背景。如果你想要多個背景，你必須在一個背景聲明中聲明它們。這是因爲在多個後臺語句中，渲染引擎假設您的意思是將新設置的背景替換爲新設置的背景，而不是添加其中的內容。

我通常用CSS3做的一件事情，特別是當仍需要所有供應商前綴時，就是將所有CSS3放入它自己的文件中。這樣，其餘部分保持可讀性，並且不會混入主CSS中。

Answer 2

試試這個。將.myClass中的所有background替換爲background-color。

Answer 3

不幸的是，仍然沒有辦法在CSS3中以簡明的方式做到這一點。 但是，您可以將僞元素用於額外的背景圖層，並覆蓋它們。這裏有一篇文章解釋了這種技術：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Answer 4

CSS3支持multiple backgrounds - 你有試過嗎？

Answer 5

如果使用得少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 6

使用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; 
} 

只要能夠有顏色的變量將是這樣一個節省時間！