Résumer la méthode d'arrière-plan HTML plein écran

L'arrière-plan plein écran est un style de conception Web populaire à l'heure actuelle, et il existe essentiellement deux méthodes pour implémenter un tel arrière-plan plein écran. L'une est obtenue via CSS (CSS3.0 nous offre plus de contrôle de style CSS riche). ); l'autre consiste à l'implémenter via le javascript familier. Ici, jQuery est utilisé directement pour la commodité du code. Puisque jQuery est mentionné, nous pouvons imaginer que puisque nous pouvons écrire en jQuery, il doit y avoir des plug-ins jQuery écrits de la même manière qui attendent que nous les utilisions sur Internet.

Méthode 1, utilisez les nouvelles fonctionnalités du style CSS3.0 pour obtenir le plein écran à Pékin (ie6-8 n'est pas pris en charge)

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

ou :

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

Principe : convertir du HTML Et le corps est défini sur une hauteur minimale de 100 %, et background-size:cover en CSS3 est utilisé pour définir l'image d'arrière-plan pour qu'elle couvre le mode plein écran.

Compatibilité :

Safari 3+

Chrome Quoi qu'il en soit+

IE 9+

Opera 10+

Firefox 3.6+

Méthode 2 : Utiliser jQuery pour implémenter

Code HTML :

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

Code CSS :

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

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

Compatibilité :

IE7+

Tout navigateur de bureau

Méthode 2, utilisez jQuery pour implémenter (ci-joint) [Utiliser le plug-in jQuery jQuery.fullBg ]

Vient d'abord le code du plugin :

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

Il n'y a qu'un peu de CSS nécessaire pour celui-ci :

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

Si vous souhaitez que votre arrière-plan reste fixe vous pouvez changer le CSS .fullBG en ceci :

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

Pour le balisage HTML, vous pouvez simplement ajouter une balise d'image avec un identifiant ou une classe, mais vous devez également ajouter un div qui contient votre contenu principal sinon cela ne fonctionnera pas correctement. C'est le strict minimum :

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

Pour appeler la fonction jQuery, ajoutez ceci au bas de votre page Web, juste avant la balise body de fermeture :

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

Encore une fois, ce plugin est assez simple donc aucune option n'est disponible. Il fait à peu près ce qu'il fait.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!