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


当前回答

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

其他回答

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

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

使用CSS缩放图像是不太可能的,但是可以通过以下方式实现类似的效果。

使用下面的标记:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

使用以下CSS:

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

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

你该结束了!

为了将图像缩放为“完全出血”并保持纵横比,你可以这样做:

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

它的效果非常好!然而,如果裁剪一个维度,它将只在图像的一侧裁剪,而不是在两侧均匀裁剪(并居中)。我已经在Firefox、Webkit和Internet Explorer 8中测试了它。

试试这个

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

我想指出,这相当于做:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}