0

背景が画像のフッターメニューがあります。

すべての画像を表示したい (暗画像は div よりも 2000x168 大きい)。幅を 100% に設定しましたが、画像全体が表示されていないようで、画面のサイズのみが表示されています

画面に表示できる部分だけでなく、全体像を表示するにはどうすればよいですか?

ここにフィドルがあります

#bottomnav{
    width:100%;
    height:50px;
   background: no-repeat url(http://eurekavi.com/barraroja.png) /*repeat 0 0*/;
    position:absolute;
    bottom:0px;

}

画像は次のようになりますこれ

4

3 に答える 3

1

ここで、これを試してください：

    #bottomnav
    {
    width:100%;
    height:50px;
    background: no-repeat url(http://eurekavi.com/barraroja.png);
    background-size:100% 100%;
    }

それが役に立てば幸い！

于 2013-04-02T16:13:41.090 に答える
1

CSS3 で background-size プロパティを使用できます。

#bottomnav{
    width:100%;
    height:50px;
    background:url(http://yoururl.com/image.png) no-repeat;
    background-size:100% auto;
}

これは機能しますが、CSS3 をサポートするブラウザーでのみ機能します。この例では、画像の高さは解像度比に従って自動的に調整されます。一定のサイズに保ちたい場合は、このような方法を試してみてください。

background-size:width height;

この設定では、幅を % または px で設定するか、上記の投稿で述べたように両方に 100% を使用できます。それが動作します。この引数 background-position:center; も使用できます。これにより、画像が中央に配置されます。

于 2013-04-02T16:17:58.090 に答える
1

あなたが望むものに応じて：

#bottomnav{
    width:600px;
    height:50px;
    background:#F00;
    position:absolute;
    bottom:0px;
    background: no-repeat url(http://eurekavi.com/barraroja.png) top center;
    background-size: contain;
}

背景を中央に配置して、左右の黒い部分のバランスが崩れないようにすることができます。

参考：http ://www.css3.info/preview/background-size/

于 2013-04-02T16:18:04.420 に答える