CSS中使用全图片背景

Wed 02 July 2014 / In categories Web Service

CSS

这个例子告诉我们怎么使用CSS来为网页布局全背景图片,简单得说,只要设置下面的CSS属性就行了:

body {
    background: url('background.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color:#fff;
    background-color:#333;
}

上面的代码只在较新版本的浏览器中才能好好工作,如果需要兼容较老的浏览器,可能需要其它hack了,可以参考这篇文章

有的浏览器可能不支持background-size的cover设置,所以可以使用下面的办法:

body {
    background: url(...) no-repeat center center fixed; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }

上面的代码先把background-size设为100%,如果浏览器不支持,就会忽略background-size: cover;,请参考万能的Stackoverflow

在不同的屏幕大小的设备上可能需要使用不同的背景图片,怎么在CSS侦测iPhone的屏幕可以看这里

其它参考文章:

http://webdesigner-webdeveloper.com/weblog/fullscreen-images-for-the-ipad-ios-and-mobile-safari/

http://www.billrobbinsdesign.com/fixing-background-image-sizing-in-ios/

http://kimili.com/journal/the-flexible-scalable-background-image-redux

Load Disqus Comments