如何使用 jQuery 更改背景图像？

要使用 jQuery 更改背景图像，您可以使用jQuery CSS() 方法。为此，使用 url()函数表示法指定整个属性值。

方法：假设我们有一个图片 URL 存储在一个变量中，然后使用 css() 方法来更改背景图片的值。

下面的例子说明了上述方法：

例子：

  

    
    jQuery Changing background-image CSS Property
    
    
        .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;
        }
    
    
    
        $(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 + ")");
            });
        });
    

  

    
    GeeksforGeeks
    
    jQuery Changing background-image CSS Property
    
    
    
        
            Change Background Image
        
    
    

  
                    

输出：

点击按钮前：

点击按钮后：

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。