-1

現在、クラブのサイトを構築していますが、バナーの修正についてサポートが必要です。バナーは2つあり、1つ目のバナーが数回繰り返され、2つ目のバナーが最後に表示されます。例えば：

[ banner 1 ][ banner 1 ][ banner 1 ][ banner 1 ][ banner 2 ]

バナー1は基本的に繰り返される装飾であり、バナー2はロゴです。

問題は、バナー＃1の繰り返しを停止して、バナー＃2が表示されるようにすることができないことです。これまでのところ、これは私が使用しているCSSです。

#banner
{   
    background-image    : url(images/banner1.jpg), url(images/banner2.jpg);
    background-repeat   : repeat-x, no-repeat;
    min-height      : 175px;
}

私が想像したようにそれを行う方法はありますか？私はこのサイトに行ったことがあります：http ：//www.css3.info/preview/multiple-backgrounds/そして私はそれを繰り返すことができないかどうか疑問に思っています、多分私は他の上に1つのバナーを置くことができます。background-positionを使用してみましたが、解決策が機能しませんでした。

4

2 に答える 2

0

divs独自の背景を持つ 2 つを持つことができます。

HTML :

<div class="banner1">
    <div class="banner2">
    </div>
</div>

CSS:

.banner1 {
    width: 200px;
    height:50px;
    background: url('http://jsfiddle.net/img/top-bg.png') repeat-x;
}

.banner2 {
    width:50px;
    float:right;
    height: inherit;
    background-color: red;
}

jsフィドル

2 つの div を並べて配置するか、上下に配置するかはあなた次第です

于 2012-08-14T19:18:55.530 に答える
0

繰り返し要素の幅を定義する必要があります。

HTML:

<div class="banner1"></div><div class="banner2"></div>

CSS:

.banner1, .banner2 {
    display: inline-block;
    height: 150px;
}
.banner1 {
    width: 75%;
    background: url('http://jsfiddle.net/img/top-bg.png') repeat-x;
}
.banner2 {
    width: 25%;
    background: red;
}

ライブデモ: jsFiddle

于 2012-08-14T19:02:31.717 に答える