HTMLフルスクリーン背景の方法まとめ

フルスクリーンの背景は現在人気のある Web デザイン スタイルであり、このようなフルスクリーンの背景を実装するには基本的に 2 つの方法があります (CSS3.0 では、より豊富な CSS スタイル コントロールが提供されます)。もう 1 つは、使い慣れた JavaScript を使用して実装することです。ここでは、コードの便宜のために jQuery を直接使用します。 jQuery について言及されていることから、jQuery で記述できるため、同様に記述された jQuery プラグインがインターネット上で使用できるよう待機しているはずだと想像できます。

方法 1. 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 と本文を最小の高さ 100% に設定します。そして、css3 size:cover のbackground-を使用して、全画面モードをカバーするように背景画像を設定します。

互換性:

Safari 3+

Chrome Whatever+

IE 9+

Opera 10+

Firefox 3.6+

方法 2、jQuery を使用して

HTML コードを実装する:

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

C SSコード:

りー

jQuery コード:

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

互換性:

IE7+

任意のデスクトップブラウザ

方法 2、jQuery を使用して実装 (添付) [jQuery プラグイン jQuery.fullBg を使用]

最初にプラグイン コードが来ます:

$(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");
});

がありますこれに必要な CSS はほんの少しだけです:

/**
 * 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)

背景を固定したままにしたい場合は、.fullBG CSS を次のように変更できます:

.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}

HTML マークアップの場合は、ID またはクラスを含むイメージ タグを追加するだけです。ただし、メイン コンテンツを含む div も追加する必要があります。そうしないと、正しく動作しません。これは最低限のことです:

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

jQuery 関数を呼び出すには、これを Web ページの下部の直前に追加します。本体の終了タグ:

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

繰り返しになりますが、このプラグインは非常にシンプルなので、使用できるオプションはありません。

以上がHTMLフルスクリーン背景の方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。