同一元素的多个背景图像/渐变，在不同的语句中声明，在 CSS3答案

【问题标题】：Multiple background images/gradients for same element, declared in different statement, in CSS3同一元素的多个背景图像/渐变，在不同的语句中声明，在 CSS3
【发布时间】：2011-10-01 12:09:16
【问题描述】：

我正在尝试用 CSS3 做一些小事...我想为一堆“.myClass”类的元素设置一个带有 -xxx-linear-gradient 的渐变（由 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 代码复制到每个 id，然后有多个背景，但是 colorzilla 给出的兼容性代码对于一个渐变来说是相当大的，所以在每个 id 中复制它会使代码更难读...

ID 具有优先权，但我想知道是否有办法“添加”第二个背景图像而不是替换它。

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

【问题讨论】：

你的元素有多大？它们有固定的尺寸吗？
我真的不知道在哪里回答你们所有人，因为似乎我不允许在我的消息中“添加答案”:) 所以显然没有办法使用多个背景在不同的 CSS 语句中具有功能，所以我暂时忘记渐变。谢谢你们。哦，我还把所有的 CSS 放在不同的 css 文件中，不同于 html，我的意思是 Shauna 说的。
好的，现在我知道为什么我不能发布不是答案的答案了:)

标签： css background gradient

【解决方案1】：

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

只要能够为颜色设置变量就可以节省大量时间！

【讨论】：

【解决方案2】：

如果您使用较少的 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');  }

【讨论】：

【解决方案3】：

CSS3 支持multiple backgrounds - 你试过吗？

【讨论】：

【解决方案4】：

您不能在单独的背景语句中使用多个背景。如果你想要多个背景，你必须在一个背景声明中声明它们。这是因为在多个背景语句中，渲染引擎假定您的意思是用新的背景替换先前设置的背景，而不是添加到现有的背景中。

我通常对 CSS3 做的一件事，尤其是在仍需要所有供应商前缀时，就是将所有 CSS3 放入自己的文件中。这样，其余部分保持可读性，并且不会混入主 CSS。

【讨论】：

好吧，你不能，但你可以使用伪元素将自定义图像添加到你的常用渐变中......

【解决方案5】：

不幸的是，仍然没有办法在 CSS3 中以简洁的方式做到这一点。但是，您可以将伪元素用于额外的背景层并覆盖它们。这是一篇解释该技术的文章：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

【讨论】：

【解决方案6】：

试试这个。将 .myClass 中的所有 background 替换为 background-color。

【讨论】：

如果它不起作用，请在 .myClass 中列出全部内容
渐变不是背景色，它们是图像值。
他说是线性渐变。应该很明显background-color 不起作用。
我的错误。所以你必须尝试重叠的不同元素。