0

それはレイアウトマスター向けです。

HTML5/CSS/JS を使用して背景画像を 3 つの異なる部分に分割したレスポンシブ レイアウトを作成するにはどうすればよいですか?

3 つの異なる画像があり、それらを結合して動的な背景を羊皮紙スタイルとして作成したいと考えています (添付の参照画像を参照してください)。したがって、固定ヘッダー、任意のサイズの HTML テキストを書き込むことができる動的な中間部分、および固定のトレーラー イメージを作成します。

ソリューションが背景、div、iframe などを使用するかどうかは関係ありません。このパズルを解決できる提案は大歓迎です!

ここに画像の説明を入力

乾杯、

デビッド

4

1 に答える 1

1

1 つの方法:

幅が 100% の 3 つの div を使用できます

<div class="header"></div>
<div class="dynamic-body"></div>
<div class="footer"></div>

これは HTML と CSS だけのフィドルです。トリミングされた img はそれほど完璧ではありません。

http://jsfiddle.net/jbx5k4su/

html img タグを取り出して div だけのスタイルを変更する方法でフィドルを更新します。

于 2015-10-14T18:45:55.653 に答える