CSS3把背景图片拉伸至100%

<!--在index.html的body里加入下列代码-->

<h1><span>Website</span></h1>

h1{
    width: 100%;
    height: 200px;
    background-image: url(head.jpg);
    background-repeat: no-repeat;
    background-size: cover;   /* 重点 */
}

span{
    display: none;   /* 隐藏文字"Website" */
}

这是用图片制作页头的方法。如果你使用的背景图片的宽度少于用户显示屏幕的宽度，就会有一部分空出来，很不美观。

不过我们可以用background-size来控制，很方便。在Chrome中测试成功，IE8则不支持。