首页 > web前端 > html教程 > css实现全屏背景_html/css_WEB-ITnose

css实现全屏背景_html/css_WEB-ITnose

WBOY
发布: 2016-06-21 09:00:02
原创
1093 人浏览过

核心代码:

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.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板