css - 多个背景 css3 : 2 repeated-x images, 每个占容器的一半

Question

我有这个: http://jsfiddle.net/MAJZz/

我想要的是红色鱼停在容器的一半，绿色鱼从那里开始直到结束。 换句话说，红色鱼应该覆盖(从 0% 到 50% 水平方向)，绿色鱼应该覆盖(从 50% 到 100% - 同样，水平方向)。

这是我的 html:

<div></div>

这是我的 CSS:

div {
    background: url(http://a0.twimg.com/profile_images/88812997/Redfish_facebook_normal.jpg) repeat-x, url(http://icons.iconarchive.com/icons/fasticon/fish-toys/16/Green-Fish-icon.png) repeat-x;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 500px;
    height: 100px;
}

这可能吗？

提前致谢。

Answer 1

我认为你可以使用 after 和 before 伪类，如果你真的只需要两个背景，

div:before {
    background: url(http://a0.twimg.com/profile_images/88812997/Redfish_facebook_normal.jpg) repeat-x;
    position:absolute;
    left:0;
    width:250px;
    height:100px;
    content:"";
}
div {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 500px;
    height: 100px;
}
div:after {
    position:absolute;
    width:250px;
    height:100px;
    right:0;
    top:0;
    background:url(http://icons.iconarchive.com/icons/fasticon/fish-toys/16/Green-Fish-icon.png) 50% top repeat-x;
    content:""
}