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 回答