如何使用jQuery平稳过渡CSS背景图片

在这篇文章中，我们将学习如何使用jQuery和CSS来实现背景图片的平滑过渡。

方法:

首先，我们使用CSS中style标签中的background-image属性添加一个透明的背景图片。

background-image: url(white.jpg);

对于过渡背景图片，我们使用CSS中的过渡属性，并在样式标签中为背景图片添加一个过渡。

transition: background-image 3s;

在脚本部分，我们创建一个图像对象，并添加需要过渡的图像源。在图像加载时，我们调用一个函数，使用JQuery的css()方法添加background-image。

JavaScript代码片段：

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

例子：下面是上述方法的完整实现。

<!DOCTYPE html>
<html>
  <head>
    <!-- JQuery CDN -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <style>
      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;
      }
    </style>
  </head>
  
  <body>
    <div class="element"></div>
  
    <script>
      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 + "')");
      };
    </script>
  </body>
</html>

输出:

如何使用jQuery平稳过渡CSS背景图片？