拉伸和缩放CSS背景

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

有没有办法让CSS中的背景拉伸或缩放以填充其容器？

#1楼

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

#2楼

SolidSmile作弊的另一个提示是通过设置宽度并使用auto作为高度来缩放（按比例调整大小）。

例如：

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

#3楼

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

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

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

#4楼

试试这个

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

#5楼

.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支持非供应商前缀版本）

此外，您可以尝试这个解决方案

    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/

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3149235

标签

opera

firefox

Backstretch

safari

Chrome