0

ヘッダー (2300x328px) と別の画像 (456x328px) があります。次に、この 2 番目の画像でこのヘッダーを左右に拡張し、ヘッダーが使用可能な幅全体を埋めるようにします。パターンがあるため、オーバーラップせずに接続する必要があります。ここに私が意味するイメージがあります: http://imgur.com/0ji3Hae 円はパターンです (重なってはいけない理由) ヘッダーを拡張するイメージは無限に繰り返すことができます。

4

3 に答える 3

1

パターンを正確に揃えるには、ヘッダー画像 (中央、左など) に従って背景パターンを揃える必要があります。次に、パターンが正しい場所から始まるようにします。

私が何を意味するのかを説明するためにフィドルを作りました - http://jsfiddle.net/taneleero/g99xa/

.header {
    background:url(http://i.imgur.com/BzVtzl4.jpg) repeat-x center;
}

.header img {
    display:block;
    margin:0px auto;
}
于 2013-10-06T20:37:55.273 に答える
0

で div ボット側を追加する必要がありrepeat-xます。jsFiddle で例を作成します。

HTML:

<div id="header">
    <div class="extend"></div>
    <div id="logo"></div>
    <div class="extend"></div>
</div>

CSS

#header {
   display: inline-block;
   border: 1px solid black;
}
#header div {
    display: inline-block;
}
.extend {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Google_Chrome_icon_(2011).svg/64px-Google_Chrome_icon_(2011).svg.png');
    height: 60px;
    width: 100px;
}
#logo {
    background-image: url('http://upload.wikimedia.org/wikipedia/he/3/3f/Microsoft_Outlook_Icon.png');
    width: 64px;
    height: 64px;
}

jsフィドル

于 2013-10-06T20:43:05.030 に答える