css - 多个背景 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:""
}