背景图片拉伸

发表于 更新于

需要做一个页面让背景图片能全屏平铺，对于现代浏览器来说很简单，使用下面的代码即可：

1
2
3
4
5
6
7
body{
    background:url(../../img/user/user_bg_2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -c-background-size: cover;
    background-size: cover;
}

这个方式可以兼容的浏览器有

* Safari 3+
* Chrome
* IE 9+
* Opera 10+ (Opera 9.5 支持background-size属性 但是不支持cover)
* Firefox 3.6+

但是蛋疼的IE浏览器，就是不给你面子，当你的背景图片宽度小于当前的浏览器宽度的时候，就会有留白，
那么就需要再加上两句，如下

1
2
3
4
5
6
7
8
9
10
body{
    background:url(../../img/user/user_bg_2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -c-background-size: cover;
    background-size: cover;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/res/img/user/user_bg_2.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/res/img/user/user_bg_2.jpg', sizingMethod='scale')";
}

需要注意的是，需要使用绝对路径。用滤镜硬拉伸，可能需要图片做点高斯模糊，要不然效果会很糟糕。

另外还有用img标签来实现的，可以参照这篇文章。