制作全屏背景技巧

制作全屏背景技巧

2012-07-04 19:01

制作全屏背景技巧

by Airen

at 2012-07-04 11:01:37

original http://www.w3cplus.com/code/quick-tip-fullscreen-backgrounds

在Web的应用与设计中，全屏背景的制作越来越常见。你是使用超大超大的背景图片来实现呢?还是在使用JavaScript脚本来制作呢？我想这些都不是什么非常好的方法。个人认为CSS3中的background-size属性是一个非常NB的属性，能轻松的帮你实现全屏背景制作，简单易懂。

我们只要把需要做为全屏背景的那张图片放在HTML标签中：

html{
    /* 需要全屏的背景图片 */
    background:url('background.jpg') no-repeat center center;

    /* 确保html元素总是占用全部浏览器窗口的高度 */
    min-height:100%;

    /* 实现的关键 */
    background-size:cover;
}

body{
    /* 在移动端更好的工作 */
    min-height:100%;
}

详细的教程可以参考《CSS3 Background-size》,制作全屏背景还可以参考《完美的页面背景图片制作》

3