拉伸和缩放CSS背景

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

当前回答

.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

适用于:

Safari 3 + Chrome无论+ IE 9 + Opera 10+ (Opera 9.5支持背景大小，但不支持关键字) Firefox 3.6+ (Firefox 4支持非供应商前缀版本)

此外，您可以尝试使用ie解决方案

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

这篇文章的作者是Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

2014-05-13 15:06:22

其他回答

使用CSS 3属性background-size:

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

自2012年以来，这一功能可用于现代浏览器。

2012-01-26 11:02:13

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

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

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

2009-11-17 19:59:03

一句话:不。拉伸图像的唯一方法是使用<img>标记。你必须要有创造力。

在2008年，当答案写出来的时候，这曾经是正确的。如今，现代浏览器支持背景大小，这就解决了这个问题。注意，IE8不支持它。

2008-12-17 22:25:47

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

2012-11-01 17:32:35

.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}