0

この背景をウェブサイトのメイン コンテンツに実装する必要があります。

ここに画像の説明を入力

コンテンツが大きくなると、左右のストライプが反応し、高さが大きくなるはずです。

問題は、メインコンテンツがどのくらいの大きさになるか分からないので、高さに合わせてどのようにカットして配置するかです。必要なピースの数と、css を使用してそれらを配置する方法を教えてください。

誰かが私にこれを説明できますか?

よろしく

4

2 に答える 2

0

私はこのように解決しました：

#content {
position:relative;
}
#left-stripe {
  background: url(" images/bg-top.png") no-repeat scroll 0 0 transparent;
  height: 85px;
  left: 112px;
  position: absolute;
  width: 90%;
}
#right-stripe {
  background: url(" images/bg-bottom.png") no-repeat scroll 0 0 transparent;
  height: 85px;
  left: 112px;
  position: absolute;
  width: 90%;
  bottom:0;
}

#middle-stripe {
  background: url(" images/bg-middle.png") repeat-y scroll 0 0 transparent;
  bottom: 85px;
  top:85px;
  left: 112px;
  position: absolute;
  width: 90%;
}

しかし、応答しないという問題がまだあります (ユーザーがブラウザーに合わせてスケーリングする場合は、それに合わせて移動する必要があります。

したがって、誰かが私のサイトに来て、幅が 960px を超えている場合、それは表示されますが、完全ではなく、左右の残りの背景が非表示になるはずです。

誰かがそれをレスポンシブにするのを手伝ってくれますか?

于 2013-01-06T21:21:58.590 に答える
0

高さサポートのみが必要な場合は、上、中、下の 3 ピースにカットします。y の繰り返しで背景を中央に設定し、上部と下部をそれぞれ top:0 と bottom:0 に配置すれば完了です。

于 2013-01-04T13:46:26.763 に答える