多个背景CSS3:2重复X图像，每个图像占了一半的容器

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

我想您可以在伪类套后和之前使用，如果您确实只需要两个背景，

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:""
}