Para cambiar la imagen de fondo usando jQuery, puede usar el método jQuery CSS() . Para esto, el valor completo de la propiedad se especifica usando la notación funcional url() .
Enfoque: supongamos que tenemos una URL de imagen almacenada en una variable y luego usamos el método css() para cambiar el valor de la imagen de fondo.
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo:
<!DOCTYPE html> <html lang="en"> <head> <title> jQuery Changing background-image CSS Property </title> <style> .box { width: 700px; height: 220px; border: 2px solid black; background-repeat: no-repeat; background-image: url( "https://www.geeksforgeeks.org/wp-content/uploads/javascript-768x256.png"); } h1{ color:green; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(document).ready(function() { // Change background image of a div by clicking on the button $("button").click(function() { var imageUrl = "https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner-768x256.png"; $(".box").css("background-image", "url(" + imageUrl + ")"); }); }); </script> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3> jQuery Changing background-image CSS Property </h3> <div class="box"></div> <p> <button type="button"> Change Background Image </button> </p> </center> </body> </html>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por MeghaKakkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA