jQuery |使用 CSS 属性设置背景图像

要使用 CSS 属性设置背景图像，我们使用 jQuery 的.css() 方法。要理解例子首先要理解方法。

jQuery .css() 方法：
此方法设置/返回指定元素的一个或多个样式属性。

句法：

• 返回一个 CSS 属性：

  $(selector).css("propertyname");
  

• 设置一个 CSS 属性：

  $(selector).css("propertyname", "value");
  

示例 1：在此示例中，背景图像由background-image属性使用 JQuery 的.css() 方法设置。

  

    
        JQuery |
      Setting background-image using CSS property.
    
    
        #div {
            background-repeat: no-repeat;
            margin-left: 120px;
        }
    
    
    
  

  

    
          
                 GeeksForGeeks  
            
        
            This is text of the div box, .
        
        
        
            click to set
        
    
    
    
    
        $('button').on('click', function() {
            $('#div')
                .css('background-image',
                    'url(' + 
'https://media.geeksforgeeks.org/wp-content/uploads/20190515121004/gfgbg1.png'
                     + ')'
                );
            $('h1').css('color', 'black');
        });
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：在此示例中，背景图像和背景重复属性由背景属性使用 JQuery 的.css() 方法设置。

  

    
        JQuery 
      | Setting background-image using CSS property.
    
    
        #div {
            margin-left: 120px;
        }
    
    
    
  

  

    
          
                GeeksForGeeks  
            
        
            This is text of the div box, .
        
        
        
            click to set
        
    
    
    
    
        $('button').on('click', function() {
            $('#div')
                .css('background', 'url(' + 
'https://media.geeksforgeeks.org/wp- 
                content / uploads / 20190515121004 / gfgbg1.png '+ '
                    ) no - repeat '
        ); $('h1').css('color', 'black');
        });
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：