2

ページの背景画像を幅と高さいっぱいに広げたい。ここでの課題は、上部と下部の 48 ピクセルの領域を除外する必要があることです (これらはヘッダーとフッターの領域であり、この画像をその背後に隠したくありません)。また、css のみ (javascript またはクライアント側コードなし) で実行しようとしています。CSS3は大丈夫です。

これが私がこれまでにいる場所です。私はトップマージンを得ることができました：

 background-image: url('images/image1.png')
background-repeat: no-repeat;
background-attachment:fixed;
background-position:  center 48px;  
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
4

3 に答える 3

1

background-sizeを使用する代わりに、画像を内部に含むdivを作成し、それをウィンドウに完全に配置してから、必要なものすべてを相対的な位置に配置し、z-indexを高くします。背景サイズのcssプロパティは、以前のバージョンのIEではサポートされていません。IE9+でのみサポートされています。これが小さな例です：

<body>
    <div class="bg-image">
        <img src="images/image-1.png" />
    </div>
    <div class="content">
        <p>this is your content</p>
    </div>
</body>

次にCSSの場合：

.bg-image {
    position: absolute;
    width: 100%;
    height: auto; /*or 100%*/
    z-index: 1;
    padding: 48px 0px;
}

.bg-image img {
    width: 100%;
    height: 100%;
}

.container {
    position: relative;
    z-index: 2;
    top: 0px;
}
于 2012-07-18T19:49:39.833 に答える
0

私はこれに少し違ったアプローチをします - 私は 3 つ<div>の s を互いの上に積み重ね、真ん中の s には希望どおりに背景画像を適用します。そうすれば、1 番目と 3 番目<div>の s の高さを 48 ピクセルにするか、任意の高さにすることができます。

于 2012-07-18T19:56:42.497 に答える
0

以下を持つラッパー div でヘッダーとフッターの両方をラップできます。

.wrapper{
  width:100%;
  height:48px;
  background:(use solid color to cover your body background )
}

次のようになります。

<div class="wrapper">
 <header>
..
..
 </header>
</div

フッターも同じです。

次に、ヘッダーとフッターの両方が次のように設定されていることを確認します。

margin: 0 auto;
width:980px ( whichever is your width )

出来上がり。

于 2012-07-18T20:14:15.757 に答える