Question

HTML：

<div class="blue red"></div>

蓝色：如果渐变背景从透明到蓝色

红色：如果渐变背景从红色到透明

为什么我们不能做类似的事情：

.blue {
   background: inherit , background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(125,185,232,1) 100%);
}
.red {
   background: linear-gradient(to right, rgba(255,10,10,1) 0%, rgba(255,255,255,0) 100%) , inherit;
}

代替：

.blue {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(125,185,232,1) 100%);
}

.red {
    background: linear-gradient(to right, rgba(255,10,10,1) 0%, rgba(255,255,255,0) 100%);
}

.blue.red {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(125,185,232,1) 100%) , linear-gradient(to right, rgba(255,10,10,1) 0%, rgba(255,255,255,0) 100%);
}

如果我只使用2个多个班级，那就好吧，但是如果我有蓝色，红色，黄色，黑色，白色，bla bla bla ....所以你知道它很无聊。

我想知道如何在多个班级中使用多重背景？

任何CSS技巧？

游乐场： http://jsfiddle.net/5gJyr/

展开：

我将使用inherit属性，为他们提供插槽

如果我有更多颜色，我会在

之后添加它们

.red {background: red,inherit,inherit;}
.blue {background: inherit,blue,inherit;}
.yellow {background: inherit,inherit,yellow;}

所以我可以添加多个类，如

<div class="red yellow">

Answer 1

您无法使用其他课程添加其他背景。 CSS属性只有一个值，它们不会累积。即使像背景这样允许多个值的属性，也不会从所有适用的类中收集和聚合这些多个值，它们是在根据级联定义背景的特定规则中指定的值。

Answer 2

简单地说，没有“更简单的方法”

inherit通过获取父属性

来工作

继承CSS值会导致指定它的元素从父元素中获取属性的计算值。它是允许每个CSS属性。

应用多个背景值的唯一方法是用逗号连接它们，

More from MDN

使用CSS3，您可以将多个背景应用于元素。这些是与您在顶部提供的第一个背景相互叠加以及后面列出的最后一个背景。只有最后的背景可以包括背景颜色。

.myclass {
  background: background1, background 2, ..., backgroundN;
}

CSS具有多个类的多个背景

2 个答案: