Fassen Sie die Methode des HTML-Vollbildhintergrunds zusammen

高洛峰
Freigeben: 2017-03-28 11:50:22
Original
3096 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

oder:

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

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="">
Nach dem Login kopieren

CSS-Code:

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

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");
});
Nach dem Login kopieren

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)
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage