如何使用 jQuery 获取 div 的背景图像？

任务是使用 jQuery 获取 div 的背景图像。您可以通过使用 jQuery 中的 CSS() 方法来完成此任务。

简单来说，我们需要创建一个空的 div 并且在点击事件时，空的 div 将获得图像作为背景。

CSS()：这是 jQuery 中的内置方法，用于添加 CSS 属性，但在这种情况下，我们需要使用 URL() 方法提供完整的属性。

句法：

• 以下语法将返回第一个匹配元素的背景颜色值。

  css("property_name");

• 此语法将为所有匹配的元素设置背景颜色值。

  $("p").css("background-color", "colorName");

URL()：这是一个用于包含文件的 CSS函数。它接受字符串格式的单个参数 URL。

句法：

url("   ")

示例 1：首先，创建一个带有按钮的空div 。将该按钮映射到 jQuery 中的CSS()方法。单击按钮后，使用图像放置在div元素中。

HTML

  
    
    
      .box {
        width: 600px;
        height: 500px;
        border: 6px solid green;
      }
    
    
    
      $(document).ready(function () {
        $("button").click(function () {
          var imageUrl = "gfg.jpg";
          $(".box").css("background-image", "url(" + imageUrl + ")");
        });
      });
    
  
  
    
  
    
         click here to see the background img.
       
    
  

输出：

• 点击前：
  
• 点击后：
  

示例 2：

HTML

  
    
    
      .box {
        width: 600px;
        height: 500px;
        border: 6px solid rgb(61, 65, 61);
      }
    
    
    
    
      $(document).ready(function () {
        $("button").click(function () {
          var imageUrl = "g.jpg";
          $(".box").css("background-image", "url(" + imageUrl + ")");
        });
      });
    
  
  
    
  
    click here !!
  
    
      button {
        background-color: blueviolet;
        align-items: center;
        margin-left: 250px;
      }
    
  

输出：

• 点击前：
  
• 点击后：