Fassen Sie die Methode des HTML-Vollbildhintergrunds zusammen

Vollbild-Hintergrund ist derzeit ein beliebter Webdesign-Stil, und es gibt grundsätzlich zwei Methoden, um einen solchen Vollbild-Hintergrund zu implementieren. Eine wird durch CSS erreicht (CSS3.0 bietet uns mehr für eine umfassende Kontrolle des CSS-Stils ); die andere besteht darin, es über das bekannte Javascript zu implementieren. Hier wird jQuery zur Vereinfachung des Codes direkt verwendet. Da jQuery erwähnt wird, können wir uns vorstellen, dass, da wir in jQuery schreiben können, ähnlich geschriebene jQuery-Plug-Ins darauf warten müssen, dass wir sie im Internet verwenden.

Methode 1: Verwenden Sie die neuen Funktionen des CSS3.0-Stils, um den Vollbildmodus in Peking zu erreichen (dh 6-8 wird nicht unterstützt)

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;
}

oder:

html{
    background:url('background.jpg') no-repeat center center;
    min-height:100%;
    background-size:cover;
}
body{
    min-height:100%;
}

Prinzip: HTML konvertieren Und der Körper wird auf die Mindesthöhe von 100 % eingestellt, und die Hintergrundgröße: Abdeckung in CSS3 wird verwendet, um das Hintergrundbild so einzustellen, dass es den Vollbildmodus abdeckt.

Kompatibilität:

Safari 3+

Chrome Whatever+

IE 9+

Opera 10+

Firefox 3.6+

Methode 2: Verwenden Sie jQuery zum Implementieren von

HTML-Code:

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

CSS-Code:

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

jQuery-Code:

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

Kompatibilität:

IE7+

Beliebiger Desktop-Browser

Methode 2, verwenden Sie jQuery zum Implementieren (angehängt) [Verwenden Sie das jQuery-Plug-in jQuery.fullBg ]

Zuerst kommt der 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)

Für dieses ist nur ein wenig CSS erforderlich:

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

Wenn Sie möchten, dass Ihr Hintergrund fest bleibt Sie können das .fullBG-CSS wie folgt ändern:

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

Für das HTML-Markup können Sie einfach ein Bild-Tag mit einer ID oder Klasse hinzufügen, aber Sie müssen auch ein Div hinzufügen, das Ihren Hauptinhalt enthält Andernfalls funktioniert es nicht richtig:

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

Um die jQuery-Funktion aufzurufen, fügen Sie dies am Ende Ihrer Webseite direkt vor dem schließenden Body-Tag ein:

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

Auch dieses Plugin ist ziemlich einfach, daher sind keine Optionen verfügbar. Es macht im Grunde einfach das, was es tut.

Das obige ist der detaillierte Inhalt vonFassen Sie die Methode des HTML-Vollbildhintergrunds zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!