1

セパレーターに 3 つの画像があり、中央部分を滑らかにしたいので、左右の部分を修正する必要があります。ページでこのように開くと、次のようになる必要があります。 http://s8.postimg.org/r9dg5v6et/dsadsa.jpg

<ul class="separator">
    <li class="sep-orj sep-left"></li>
    <li class="sep-orj sep-middle"></li>
    <li class="sep-orj sep-right"></li>
</ul>

ul.separator {
    width:100%;
}
ul.separator li.sep-orj {
    height:21px;
    display:block;
    float:left;
}
ul.separator li.sep-left {
    width:3%;
    background: url(............./left-arrow.gif) repeat-x;
}
ul.separator li.sep-middle {
    width:94%;
    background: url(............./middle.gif) repeat-x;
}
ul.separator li.sep-right {
    width:3%;
    background: url(............./right-arrow.gif) repeat-x;
}
4

2 に答える 2

1

あなたのユースケースでこれにリストを使用するのにはおそらく十分な理由があると思いますが、<hr class="separator">念のため、HTML の単一要素と CSS のこのチャンクを使用して、単一のワイド画像のみを使用する非常に単純なソリューションを次に示します。

.separator {
    position: relative;
    height: 20px;
    border: none;
    display: block;
    max-width: 1000px; /* ~ width of the image */
    background: url('/img/dsadsa.jpg') left center no-repeat;
}

.separator:after {
    content: "";
    display: block;
    width: 50px;
    height: 20px;
    background: url('/img/dsadsa.jpg') right center no-repeat;
    position: absolute;
    right: 0;
}
于 2013-05-13T23:24:28.673 に答える