操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

全屏背景是當下比較流行的一種網頁設計風格，而具體的實現這樣的全屏背景無外乎基本就兩種方法，一種的通過CSS去實現的(CSS3.0為我們提供了更為豐富的CSS樣式控制)；另一種就是通過我們熟悉的去實現，這里為了代碼方便就直接使用了。既然提到，我們就可以想象既然我們能用寫了c店全屏背景代碼c店全屏背景代碼，那網絡上就一定有類似的寫好的插件等著我們用了。

方法一、利用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中的-size:cover;將背景圖片設置成封面全屏模式。

兼容性：

3+

+

IE 9+

Opera 10+

3.6+

方法二、使用實現

HTML代碼：

登錄后復制

CSS代碼：

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

登錄后復制

代碼：

$(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+

任何桌面瀏覽器

方法二、使用實現(附)【使用插件.】

First comes the 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 CSS 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 to stay fixed you can the . CSS to this:

.fullBg {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

登錄后復制

For the HTML , you can just add an image tag with an id or class, but you also need to add a div that your main or else it won’t work . This is the bare :

登錄后復制

To call the , add this to the of your web page, right the body tag:

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

登錄后復制

Once again, this is so no are . It much just does what it does.

以上就是總結HTML全屏背景的方法的詳細內容，更多請關注php中文網其它相關文章！