css实现全屏背景_html/css_WEB-ITnose
body{ background: url(../img/background-photo.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
这种方法只支持Safari 3+,Chrome+,IE 9+, Opera 10+, FireFox 3.6+的浏览器。
具体的请移步这里,国外的一篇文章,有详细的方法介绍:
http://css-tricks.com/perfect-full-page-background-image/
这篇文章里的一个示例(这种方法支持的比较好,经测试支持IE7,不支持IE6):
http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php
文章的另一个示例(用jQuery实现,支持IE7+ / Chrome / FireFox / Opera / Safari,但不支持IE6): http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php
另外附上相关案例和插件供参考:
一个全屏背景图片网站:http://ringvemedia.com/,不过这个是用Mootools实现的,兼容IE6/7。
jQuery插件@jquery-backstretch:
http://srobbin.com/jquery-plugins/backstretch/#demo
http://paulmason.name/media/demos/full-screen-background-image/ (这个不支持IE6)
另一篇教程文章:
http://www.alistapart.com/articles/supersize-that-background-please/
相关阅读:
22个用全屏背景图片的网站:
http://www.awwwards.com/22-css-websites-with-fullscreen-backgrounds.html
HTML5浏览器全屏API示例:
http://blogs.sitepointstatic.com/examples/tech/full-screen/index.html
上一篇: 简单的正则问题
下一篇: 基于PHP实现的事件机制实例分析
推荐阅读
-
请大家给我看看这个下拉菜单到底怎么了_html/css_WEB-ITnose
-
css3仿天猫侧边栏_html/css_WEB-ITnose
-
DIV+CSS,如何使DIV跟随窗口大小改变位置,跟随住某个点击显示的图标_html/css_WEB-ITnose
-
静态页面下IE为何不加载CSS?_html/css_WEB-ITnose
-
DIV+CSS 清除浮动方法总结_html/css_WEB-ITnose
-
css3的基础用法,新手必看哈(还有css3和jquery动画的对比)_html/css_WEB-ITnose
-
防止页面客户端被缓存_html/css_WEB-ITnose
-
Python自学之2016.4.9_html/css_WEB-ITnose
-
下拉菜单问题(css兼容)求大神指导!!!_html/css_WEB-ITnose
-
html块级元素和行内元素_html/css_WEB-ITnose