总结HTML全屏背景的方法

2020-11-27 来源：华佗健康网

全屏背景是当下比较流行的一种网页设计风格，而具体的实现这样的全屏背景无外乎基本就两种方法，一种的通过CSS去实现的(CSS3.0为我们提供了更为丰富的CSS样式控制)；另一种就是通过我们熟悉的javascript去实现，这里为了代码方便就直接使用jQuery了。既然提到jQuery，我们就可以想象既然我们能用jQuery写了，那网络上就一定有类似的写好的jQuery插件等着我们用了。

方法一、利用CSS3.0样式新特性实现北京全屏 (不支持ie6-8)

html {
 background: url(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代码：

<img src="images/bg.jpg" id="bg" alt="">

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:

<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
 <!-- Your site content goes here -->
</div>

To call the jQuery function, add this to the bottom of your web page, right before the closing body tag:

<script type="text/javascript">
$(window).load(function() {
 $("#background").fullBg();
});
</script>

Once again, this plugin is pretty simple so no options are available. It pretty much just does what it does.

显示全文

全部频道

总结HTML全屏背景的方法