全屏背景是当下比较流行的一种网页设计风格，而具体的实现这样的全屏背景无外乎基本就两种方法，一种的通过CSS去实现的(CSS3.0为我们提供了更为丰富的CSS样式控制)；另一种就是通过我们熟悉的javascript去实现，这里为了代码方便就直接使用jQuery了。既然提到jQuery，我们就可以想象既然我们能用jQuery写了，那网络上就一定有类似的写好的jQuery插件等着我们用了。
方法一、利用CSS3.0样式新特性实现北京全屏 (不支持ie6-8)
html { background: url(https://www.php.cn/faq/images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
登录后复制
或：
html{ background:url('background.jpg') no-repeat center center; min-height:100%; background-size:cover;}body{ min-height:100%;}
登录后复制
原理：将html及body设置为最小高度为100%，使用css3中的background-size:cover;将背景图片设置成封面全屏模式。
兼容性：
Safari 3+
Chrome Whatever+
IE 9+
Opera 10+
Firefox 3.6+
方法二、使用jQuery实现
HTML代码：
登录后复制
CSS代码：
#bg { position: fixed; top: 0; left: 0; }.bgwidth { width: 100%; }.bgheight { height: 100%; }
登录后复制
jQuery代码：
$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(resizeBg).trigger("resize");});
登录后复制
兼容性：
IE7+
任何桌面浏览器
方法二、使用jQuery实现(附)【使用jQuery插件jQuery.fullBg】
First comes the plugin code:
/** * jQuery.fullBg * Version 1.0 * Copyright (c) 2010 c.bavota - http://bavotasan.com * Dual licensed under MIT and GPL. * Date: 02/23/2010**/(function($) { $.fn.fullBg = function(){ var bgImg = $(this); function resizeImg() { var imgwidth = bgImg.width(); var imgheight = bgImg.height(); var winwidth = $(window).width(); var winheight = $(window).height(); var widthratio = winwidth / imgwidth; var heightratio = winheight / imgheight; var widthdiff = heightratio * imgwidth; var heightdiff = widthratio * imgheight; if(heightdiff>winheight) { bgImg.css({ width: winwidth+'px', height: heightdiff+'px' }); } else { bgImg.css({ width: widthdiff+'px', height: winheight+'px' }); } } resizeImg(); $(window).resize(function() { resizeImg(); }); };})(jQuery)
登录后复制
There is only a little CSS needed for this one:
.fullBg { position: absolute; top: 0; left: 0; overflow: hidden;}#maincontent { position: absolute; top: 0; left: 0; z-index: 50;}
登录后复制
If you want your background to stay fixed you can change the .fullBG CSS to this:
.fullBg { position: fixed; top: 0; left: 0; overflow: hidden;}
登录后复制
For the HTML markup, you can just add an image tag with an id or class, but you also need to add a div that contains your main content or else it won’t work properly. This is the bare minimum:
登录后复制
To call the jQuery function, add this to the bottom of your web page, right before the closing body tag:
$(window).load(function() { $("#background").fullBg();});
登录后复制
Once again, this plugin is pretty simple so no options are available. It pretty much just does what it does.
以上就是总结HTML全屏背景的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2834361.html
