Jquery 处理覆盖多个CSS背景的好方法？

我喜欢CSS3引入了多个背景图像。。。但是，如果你知道我的意思的话，用逗号分隔图像的方法有点，嗯，不是很级联的

有没有什么方法可以做到这一点：

.a {
   background: url(a.png) no-repeat center center;
}

.b {
   background: url(b.png) repeat-x 0 bottom;
}

并将其应用于如下元素：

<div class="a b"></div>

（我知道如果上面的CSS这样做了，那就错了。但是如果有一个解决方案，比如属性

后台添加
或其他什么的话，那就太好了。）

我在寻找未来解决这个问题的任何希望。。。一个规范，一个只在某些浏览器中工作的解决方案，jQuery的使用，等等。。。因为CSS3规范还存在一些其他类似的问题。例如，您无法分离文本阴影的属性，等等。这相当令人沮丧

谢谢……
我不确定这是不是你想要的。。。但它不需要向HTML中添加额外的元素就可以工作，并且应该会给您一些想法：

据我所知，这是不可能的。目前，将两个独立的
div
s置于另一个具有不同背景的
s之上会更容易（如果您希望能够自己编辑每个背景）。还可以将框阴影添加到该列表中。如果您只是希望减少必须编写和维护的CSS选择器的数量，使用CSS预处理器（如LESS或SASS）怎么样？我尝试使用无效的CSS，如background add、background-add2等属性，但不幸的是JavaScript无法解析无效的CSS属性，因为它们被丢弃了。。。。我想我可能只能使用嵌套的div。CSS预处理器并不是我真正想要的，因为我只想使用kube（）的按钮样式，但向按钮添加图标。对于处理过的CSS来说，为每个不同的图标复制所有渐变样式是一种浪费。我想要层叠多个背景，也就是说，我想要div同时具有两个背景。CSS3支持同一元素上的多个背景图像，但没有级联支持，您只需覆盖
background
声明。我不想定义
.a
和
b
和
.a.b
，就像我不想说
h1{font size:24px；}h1.blue{font size:24px；color:blue；}
。
background-image: url(a.png), url(b.png);
background-repeat: no-repeat, repeat-x;
background-position-x: center, 0;
background-position-y: center, bottom;

.a {
    position: relative;
    width: 100%;
    height: 350px;
    background-image: url('http://placekitten.com/g/100/100');
    background-repeat: repeat-x;
    background-position: 0 0;
}

.a * {
    position: relative;
}

.a:before {
    position: absolute;
    top:0;
    content:"\0020";
    display:block;
    width: 100%;
    height: 100%;
    background-image: url('http://placekitten.com/100/100');
    background-repeat: repeat-y;
    background-position: 0 0;
};