1

私はこれを持っています: 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;
}

出来ますか ？

前もって感謝します。

4

1 に答える 1

0

本当に 2 つの背景だけが必要な場合は、疑似クラスの前後に使用できると思います。

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:""
}
于 2012-10-30T22:15:26.567 に答える