在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%;
}
