是否有一种方法来获得CSS的背景拉伸或缩放以填充它的容器?


当前回答

目前还没有。它将在CSS 3中可用,但要在大多数浏览器中实现还需要一段时间。

其他回答

这就是我做的。在拉伸类中,我简单地将高度更改为auto。这样,你的背景图片总是与屏幕宽度相同,高度也总是有合适的大小。

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

目前还没有。它将在CSS 3中可用,但要在大多数浏览器中实现还需要一段时间。

试试文章的background-size。如果您使用以下所有选项,它将在除Internet Explorer之外的大多数浏览器中工作。

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

使用border-image: yourimage属性来设置你的图像,并将其放大到屏幕或窗口的整个边界。

另一个很好的解决方案是robbin的Backstretch,它可以应用于页面的主体或任何元素- http://srobbin.com/jquery-plugins/backstretch/