0

Web サイトの背景に使用している画像が、ページのちょうど中央に配置されています。

私が説明していることのスクリーンショットは次のとおりです。

背景画像

画像の左右に黒いスペースがあるのはなぜですか?

以下の CSS は次のとおりです。

body {
background: black url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg')no-repeat 50% 100%;
}
4

4 に答える 4

4

背景画像がウィンドウ サイズのスペースをカバーするのに十分な大きさではないようです。その結果、black提供している背景色が、画像でカバーできない領域に表示されています。

私は次のことを試してみたいと思います：

body {
    background-image: url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg');
    background-position: center;
    background-size: cover;
}

bodyこれにより、背景画像がHTML をカバーするようになります。詳細については、こちらをご覧ください。

于 2013-10-02T07:55:14.987 に答える
0

CSS で次のプロパティを使用します。

body {
background-size:cover;
}

また

body {
background-size:100%(for width) 100%(for height);
}

それが役立つことを願っています。

于 2013-10-02T07:56:42.227 に答える
0

ページの中央に本文が使用されているようです。本文はコンテンツと同じくらい広いので、画像はそこで終わります。ルートhtml要素は、本体から背景色を取得しますが、画像は取得しません。

解決策として、本文に背景を設定しながら、ラッピング div を追加してページを中央に配置することを検討する必要があります。

HTML の例

<html>
  <body>
    <div class="page"> ... </div>
  </body>
</html>

CSS の例

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: black url(...) no-repeat center top;
}

.page {
  width: 90%;
  margin: 0 auto;
}
于 2013-10-02T07:54:01.183 に答える