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


当前回答

使用CSS 3属性background-size:

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

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

其他回答

添加背景附件行:

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

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

在CSS3中使用background-size属性:

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

编辑:Modernizr支持检测背景大小支持。您可以使用编写的JavaScript解决方案来工作,无论您需要它,并在不支持时动态加载它。这将保持代码的可维护性,而无需诉诸于某些浏览器的侵入性CSS hack。

就我个人而言,我使用jQuery脚本来处理它,它是imgsizer的一个改编。正如我现在所做的大多数设计一样,我在设备之间使用宽度%的流体布局,其中一个循环有轻微的适应(考虑到大小并不总是100%):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

编辑: 你可能也对jQuery CSS3 Finaliz[s]e感兴趣。

试试这个

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;
}

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

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