-1

このデザインをHTMLおよびCSS形式に変換しています。

左と右が同じ画像ファイルを使用していないため、バックグラウンドトップを繰り返すと行き詰まります。

このトリックを使ってみましたが、うまくいきませんでした。

これらのファイルを繰り返して、中央にヘッダー（header.jpg）を配置したいと思います。

バックグラウンドポジションも試しましたが、うまくいきませんでした。

友達はどうすればいいですか？

ありがとうございました。

4

5 に答える 5

1

あなたの質問を理解できるかどうかはわかりませんが、これがあなたが求めているものだと思います：http:
//jsfiddle.net/ub66M/1/

htmlは次のようになります。

<div id="page">
  <div id="header-wrapper">
    <div id="header-left"><!-- empty, just for background --></div>
    <div id="header-right"><!-- empty, just for background --></div>
    <div id="header-center">
        the actual content of the header comes here
    </div>
  </div>
</div>

cssは次のようになります。

#header-wrapper {
    width: 100%;
    position: relative;
}
#header-left, #header-right {
    width: 50%;
    position: absolute;
    top: 0;
    background-repeat: repeat-x;
    height: 284px;
    z-index: -1;
}
#header-left {
  left: 0;
  background-image: url(http://i.imgur.com/tcr1F.jpg);
}
#header-right {
  left: 50%; 
  background-image: url(http://i.imgur.com/PchTG.jpg);
}
#header-center {
    width: 500px; /* adapt to actual width of center slice */
    height: 284px;
    margin: 0 auto;
    background: url(http://placehold.it/500x284) no-repeat; /* put your center slice here */
}

秘訣は、2つのdivを追加し、それらをヘッダーの実際のコンテンツの絶対後ろに配置することです。コース外の中央のdivには、正しい、繰り返されない画像のスライス、およびヘッダーの実際のコンテンツが含まれている必要があります。

お役に立てれば！

于 2013-01-17T20:04:06.453 に答える
1

おそらく、繰り返すほうがよいでしょう-y背景と、<div class=wrapper>すべてのサイトコンテンツをラップするwの背景、またはこのようなもの...そしてより大きな切り抜きをカットします..高さ1ピクセルだけでなく、約50〜60

于 2013-01-17T19:21:20.443 に答える
0

このデザインを作成する場合は、ピンクからオレンジの背景の水平スライス（15〜20ピクセル程度）を取得し、に設定しrepeat-yます<body>。メインコンテンツの周りのピンクの上下の境界線は、まさにそのように見えます-上下のピンクの境界線。

于 2013-01-17T19:19:43.833 に答える
0

水平方向または垂直方向のグラデーションではないため、これら2つの画像でそのヘッダーを正確に表現することはできません。対角線上にあります。ただし、CSSグラデーションを使用すると非常に簡単に実行できます。

http://jsfiddle.net/ZteRf/

background: -moz-linear-gradient(-45deg, #ff3232 0%, #fff989 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff3232), color-stop(100%,#fff989)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ff3232 0%,#fff989 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ff3232 0%,#fff989 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ff3232 0%,#fff989 100%); /* IE10+ */
background: linear-gradient(135deg, #ff3232 0%,#fff989 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#fff989',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

http://www.colorzilla.com/gradient-editor/

于 2013-01-17T19:26:47.543 に答える
0

このコードをcssで使用します

   body
   {
   background-image:url("http://s8.postimage.org/r3vb8vx2t/NEIPb.jpg");
   background-repeat:repeat-y;
   }

http://jsfiddle.net/v4zTT/でのデモ（javascriptと結果の間にドラッグすると完全な画像が表示されます）

幸運を..：）

于 2013-01-17T19:27:17.567 に答える