3

我喜欢 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 的属性等。这很令人沮丧。

谢谢....

4

1 回答 1

0

不确定这是否是你想要的......但它无需向 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;
};
于 2013-10-04T02:24:42.060 回答