Utilisez jQuery et CSS pour étirer les images d'arrière-plan_jquery

Il est désormais courant d'utiliser de grandes images d'arrière-plan dans la conception de pages WEB, alors savez-vous comment utiliser une grande image d'arrière-plan pour créer un effet d'étirement ? C'est-à-dire, utilisez une image d'arrière-plan de taille fixe et laissez-la s'étirer avec la taille du navigateur dans la page, tout comme l'effet de fond d'écran de notre ordinateur. Cet article vous expliquera comment utiliser jQuery et CSS pour obtenir un effet d'étirement d'image d'arrière-plan.

Étendez l'image d'arrière-plan au lieu de la mosaïque. Faites attention à l'effet de mosaïque. Nous pouvons utiliser CSS background-repeat pour implémenter l'effet de mosaïque de l'image d'arrière-plan. Cet effet a été largement utilisé dans certaines conceptions de pages avant-gardistes, en particulier dans certaines pages indépendantes. Il est courant que les pages de connexion utilisent des effets d'image d'arrière-plan étirés.
Il existe actuellement deux solutions pour obtenir l'effet d'étirement des images d'arrière-plan. L'une est CSS. Nous pouvons utiliser background-size:cover pour obtenir l'effet d'étirement des images. Cependant, IE8 et versions antérieures ne prennent pas en charge la taille d'arrière-plan. utilisez l'effet de filtre Microsoft, mais IE6 ne le prend pas en charge. Après tout, certains sous-performants utilisent IE6. Une autre solution consiste à utiliser jQuery, qui résout complètement le problème de compatibilité des navigateurs, et jQuery reste puissant.
Solution CSS
Nous préparons une image d'arrière-plan de n'importe quelle taille. Supposons que nous souhaitions créer une page de connexion et utiliser une image d'arrière-plan en relief dans la page. Il suffit d'ajouter le code suivant au corps :

<div id="main"> 
...登录表单 
</div> 

Ensuite le CSS s'écrit comme ceci :

body{background:url(bg.jpg) center center;background-size:cover;height:900px;width:100%; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');} 
#main{position:absolute; top:50%; left:50%; width:420px; height:250px; 
margin:-125px 0 0 -210px; background:#ffc} 

Nous utilisons background-size pour obtenir l'effet d'étirement de l'image d'arrière-plan, mais pour être compatible avec IE7 et IE8, vous devez utiliser un filtre pour y parvenir. Notez que dans cette solution, doit. spécifiez la hauteur du conteneur, height:900px est spécifié dans cet exemple.
La solution CSS a certaines limites, la hauteur du conteneur doit être spécifiée et IE6 n'est pas compatible, la solution parfaite est donc d'utiliser jQuery.
Solution jQuery
Nous utilisons jQuery pour insérer dynamiquement un DIV dans le corps en premier, et le DIV contient une image, qui est l'image d'arrière-plan pour laquelle nous avons besoin d'un effet d'étirement. Utilisez ensuite jQuery pour obtenir la taille de la fenêtre du navigateur et définissez dynamiquement la taille (largeur et hauteur) de l'image d'arrière-plan en fonction de la taille de la fenêtre du navigateur.

$(function(){ 
  $("body").append("<div id='main_bg'/>"); 
  $("#main_bg").append("<img src='bg.jpg' id='bigpic'>"); 
  cover(); 
  $(window).resize(function(){ //浏览器窗口变化 
    cover(); 
  }); 
}); 
function cover(){ 
  var win_width = $(window).width(); 
  var win_height = $(window).height(); 
  $("#bigpic").attr({width:win_width,height:win_height}); 
} 

Dans le code ci-dessus, la fonction cover() définit dynamiquement la taille de l'image d'arrière-plan. L'image d'arrière-plan est ajoutée dynamiquement via la méthode append de jQuery. Lorsque la page est chargée et que la fenêtre du navigateur change, l'image d'arrière-plan peut être étirée. . L'effet est que la page prête et redimensionnée appelle la fonction cover().

Êtes-vous satisfait des deux solutions ci-dessus ? Je préfère la solution jQuery , Bref, j'espère qu'elle pourra aider tout le monde à mieux maîtriser les techniques d'étirement des images d'arrière-plan avec jQuery et CSS.