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则不支持。