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

📅  最后修改于: 2022-05-13 01:55:52.526000             🧑  作者: Mango

如何使用 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


  
    
    
    
  
  
  
    
          


输出:

平稳过渡