1

我有一个 100% 的页脚 div，我想在其中应用背景。背景图片宽度为1350px，这是背景图片

https://dl.dropbox.com/u/69217301/bg.png

如您所见，图像是曲线之一，因此当屏幕尺寸大于 1350 像素时，我的背景图像将重复，但如果我设置重复无，它也不会填充 100%。

所以我想知道的是，有没有什么方法可以将页脚背景设置为 100% 填充，无论屏幕尺寸是多少并且不重复？

请帮助我。任何解决方案都是可以接受的，CSS 或 Javascript，没关系。谢谢你。

4

4 回答 4

2

你试过了background-position: center吗？这将使其居中对齐，因此如果您拉伸页面，背景图像仍将位于中间。

另外：拉伸和缩放 CSS 背景

于 2013-02-06T02:02:04.813 回答
1

您可以为此使用背景大小属性。像这样写：

#footer{
 background-size:100% auto;
 -moz-background-size:100% auto;
 -webkit-background-size:100% auto;
}

阅读更多http://www.css3.info/preview/background-size/

于 2013-02-06T02:04:38.163 回答
1

拉伸背景图像以完全填充内容区域（CSS3）：

div
{
background:url(image.png);
background-size:100% 100%;
background-repeat:no-repeat;
}
于 2013-02-06T02:04:53.547 回答
1

最好的方法是将背景大小设置为cover：

CSS：

.cover{
    background-image: url("https://dl.dropbox.com/u/69217301/bg.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 126px;
}

这在jsFiddle中很难看到，因为结果窗口非常小，但是如果您将其展开尽可能多，您可以缩小并获得一个大致的概念。把它放在一个单独的页面上，以真正看到它的实际效果。

于 2013-02-06T04:00:59.527 回答