在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》,制作全屏背景还可以参考《完美的页面背景图片制作》