Question

我喜欢CSS3已经引入了多个背景图像...但是如果你知道我的意思，那么只使用逗号分隔图像的方法有点好，不是很级联。

是否有任何方法来接受这个：

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

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

并将其应用于如下元素：

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

这样计算出的样式是：

background-image: url(a.png), url(b.png);
background-repeat: no-repeat, repeat-x;
background-position-x: center, 0;
background-position-y: center, bottom;

（我知道，如果上面的CSS做到这一点，那就错了。但如果有像属性background-add之类的解决方案那么它会很棒。）

我正在寻找未来解决方案的希望......一个规范，一个只适用于某些浏览器的解决方案，jQuery的使用，无论如何......因为还有其他一些类似的问题CSS3规范也是如此。例如，你不能分开text-shadow等的属性。这是相当令人沮丧的。

...谢谢

Answer 1

不确定这是否适合您...但是无需在HTML中添加额外元素即可使用，并且应该为您提供一些想法：http://jsfiddle.net/howlx5/VrWDk/

.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;
};

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

1 个答案: