如何使用 jQuery 平滑过渡 CSS 背景图像？

在本文中，我们将学习使用 jQuery 和 CSS 实现背景图像的平滑过渡。

方法：

• 首先，我们使用 样式标签中 CSS 中的background-image属性。

  background-image: url(white.jpg);

• 对于过渡背景图片，我们使用 CSS 中的transition属性，并在 style 标签中为背景图片添加过渡。

  transition: background-image 3s;

• 在脚本部分，我们创建一个图像对象并添加需要转场的图像源。在图像加载，我们调用一个函数，使用添加背景图片 JQuery 中的css() 方法。

JavaScript 代码片段：

var image = new Image();
// Image for transition
image.src = "geek.png";
image.onload = function () {
  $(".element").css("background-image", 
                    "url('" + image.src + "')");
};

示例：以下是上述方法的完整实现。

HTML

  
    
    
    
    
      body {
        width: 100%;
        height: 100%;
      }
      .element {
        background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20210507170406/white.jpg);
        width: 60%;
        height: 100%;
        padding: 200px;
        background-repeat: no-repeat;
        transition: background-image 3s;
      }
    
  
  
  
    
  
    
      var image = new Image();
  
      // Image for transition
      image.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210507170600/gfg1-300x67.png";
      image.onload = function () {
        $(".element").css("background-image", 
                          "url('" + image.src + "')");
      };
    
  

输出：

平稳过渡