总结HTML全屏背景的方法

  全屏背景是当下比较流行的一种网页设计风格，而具体的实现这样的全屏背景无外乎基本就两种方法，一种的通过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(&#39;bgheight&#39;);
        } else {
            $bg
                .removeClass()
                .addClass(&#39;bgwidth&#39;);
        }
                                                                                                                                                                
    }
                                                                                                                                                                            
    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.

Atas ialah kandungan terperinci 总结HTML全屏背景的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!