0

ナビゲーション バーの上に全幅の画像を作成しようとしていますが、画像を画面に表示することさえできません。ここに私の単純なHTMLがあります:

<html>
  <body>
    <div class="wrapper" />
  </body>
</html>

そしてCSS：

.wrapper {
  background-image: url(../assets/bridge.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%;
}

jpg がブラウザに表示され、リソースでクリックできるので、パスに問題はありません。画面はまだ空白で、何も表示されていません。どんな助けでも素晴らしいでしょう。

4

5 に答える 5

3

これは、height:100%機能的に役に立たず、結果として div に高さがなくなるためです。

div に固定の高さを指定すると、画像は期待どおりに表示されます。

または、背景画像をページの背景に適用する場合は、それを<html>要素に適用して、ラッパー全体を 100% 失敗させることを回避できます。

html {
     background-image: url(../assets/bridge.jpg);
     background-repeat: no-repeat;
     background-size: 100%;
}
于 2013-05-03T10:51:44.623 に答える
1

http://jsfiddle.net/dolours/JcxLm/2/特定の高さを与える、高さ 100% は無意味

.wrapper {
  background-image: url(../assets/bridge.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 50px;
}
于 2013-05-03T10:56:46.970 に答える
0

body タグに css を使用できます。body の css は次のようになります。

body{
   background: url(../assets/bridge.jpg) center top no-repeat;
}

背景画像だけが必要な場合は、うまくいくと思います。

于 2013-05-03T10:59:12.950 に答える
0

これを試して<div class="wrapper"></div>

于 2013-05-03T10:47:02.427 に答える
0

div 内にコンテンツがなく、サイズが 0 であるため、画像が表示されない可能性があります。この理論をテストするには、幅と高さを 200px などの設定サイズに設定してみてください。また、コードを次のように変更します。

<div class="wrapper"> </div>
于 2013-05-03T10:50:23.213 に答える