html - CSS/HTML を使用して背景を作成しますか?

Question

みんな私は、カットアップからhtml/cssでの構築まで、さまざまなオプションを試してきました。何も実際に機能していないようです:(

どうやってこれをやりますか？

リンク:- http://www.flickr.com/photos/gavinwynne/6902590869/

Answer 1

最も一般的な方法の 1 つは、下の図に示すように、画像を 3 つに分割することです。

ピース 1 が最初に表示される場所で、ピース 2 の高さを 1px に等しくし、CSS を使用して y 軸で繰り返し、コンテナを「閉じる」ためにピース 3 を下部に配置します。

html は次の形式になります。

<div class="div_top"></div>

<div class="div_middle"> your content here </div>

<div class="div_bottom"></div>

アップデート

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

 .div_top { 
      background-image:url('top_bg.jpg');
      background-repeat:no-repeat;
      width:800px;
  }

 .div_middle { 
      background-image:url('middle_bg.jpg');
      background-repeat:repeat-y;
      width:800px;
  }

 .div_bottom { 
      background-image:url('bottom_bg.jpg');
      background-repeat:no-repeat; 
      width:800px;
  }

上部と下部の div にはコンテンツがなく、実際には背景画像を表示するために拡張されないため、固定の高さを設定することをお勧めします。

Answer 2

最も簡単な方法は、太い境界線とインセット ボックスの影を使用することです。ただし、ブラウザのサポートは多少制限されています。基本的には、IE9+ と最新のブラウザー ( ref ) に帰着します。

デモ

body {
    min-height: 300px;
    border: 24px solid #666;
    box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
    -webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
    -moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
    padding: 35px;
}