jquery change l'image d'arrière-plan

Dans le développement Web, changer l'image d'arrière-plan est une tâche basique. En utilisant jQuery, vous pouvez réaliser cette tâche plus facilement. Cet article explique comment utiliser jQuery pour modifier l'image d'arrière-plan de la page.

Tout d'abord, nous avons besoin d'une page HTML et déclarons une feuille de style CSS pour celle-ci. Dans la feuille de style, nous pouvons définir une ou plusieurs images de fond selon nos besoins. Par exemple, voici une feuille de style CSS de base qui définit deux images d'arrière-plan :

body {
  background-image: url("bg1.png");
  background-repeat: repeat;
}

.container {
  background-image: url("bg2.png");
  background-repeat: no-repeat;
}

Ensuite, nous devons introduire la bibliothèque jQuery. Ajoutez le code suivant à la page HTML :

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Maintenant, nous pouvons utiliser le code jQuery pour modifier l'image d'arrière-plan de la page. Tout d’abord, vous devez obtenir l’élément dont vous souhaitez modifier l’image d’arrière-plan. Nous pouvons utiliser des sélecteurs dans jQuery pour obtenir des éléments. Par exemple, pour changer l'image de fond du corps, vous pouvez utiliser le code suivant :

var $body = $('body');

Pour changer l'image de fond du .container, vous pouvez utiliser le code suivant :

var $container = $('.container');

Ensuite, utilisez la méthode css dans jQuery pour modifier l'image de fond. Le code suivant peut changer l'image d'arrière-plan du corps en bg3.png :

$body.css('background-image', 'url("bg3.png")');

Pour changer l'image d'arrière-plan du .container en bg4.png, vous pouvez utiliser le code suivant :

$container.css('background-image', 'url("bg4.png")');

Veuillez noter que lors de la modification de l'arrière-plan image, vous devez fournir le chemin d'accès correct à l'image et formater correctement l'image d'arrière-plan.

Si vous devez ajouter des effets d'animation dans le temps, vous pouvez utiliser la méthode d'animation. Par exemple, le code suivant changera l'image d'arrière-plan du conteneur de bg2.png à bg5.png en 2 secondes :

$container.animate({
  'background-image': 'url("bg5.png")'
}, 2000);

Ce qui précède explique comment utiliser jQuery pour modifier l'image d'arrière-plan. Grâce à un simple code jQuery, nous pouvons plus facilement modifier l’image d’arrière-plan de la page Web. J'espère que cet article vous sera utile.

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!