Jquery 复制CSS的效果”；背景图像"；-替代方法？

我正在寻找一种实现全尺寸响应背景图像的方法，就像下面使用CSS可以实现的那样，除了我还要求我的背景可以动画化（可以使用Jquery褪色）

以下是CSS，它为我的登录页提供了所需的效果：

body {
  margin: 0;
  background-image: url(images/lovelyphoto.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  /* bg color while image loads */
}

当访问者单击“take a tour”按钮时，我需要背景图像淡入淡出，这是使用Jquery实现的，它还将新html呈现到DOM中，包括要淡入的新背景图像。但当我应用以下Jquery时，它无法实现平滑过渡，我认为这是因为背景图像CSS属性不可设置动画（请参阅：w3schools，“可设置动画的属性”：

$（文档）.ready（函数（）{
$（“.button”）。单击（函数（）{
$（“body”）.fadeOut（1200，function（）{
$（“body”）.html（'/*新的html放在这里*/'）.fadeIn（1200）；
setTimeout（fadeToPageThree，6*1000）；//设置pg2到pg3转换的计时器
})；//关闭第一页淡出
})；//关闭单击处理程序
});

我一直在尝试的解决方案是去掉css背景图像，而是将我的背景图像作为标记放在html中。这解决了我的淡入淡出问题，因为Jquery可以处理这个img元素的淡入淡出，但它并没有给我应用到上面主体的CSS的响应效果，不管我尝试应用到img的宽度、高度、最小宽度等CSS样式是什么

---

任何见解将不胜感激

你可以将它翻转过来，而不是将图像淡出，而是在上面淡入一些东西。您可以将图像作为背景图像保留在

车身上，并具有您喜欢的所有优点，并在其顶部添加一个固定的背景层
，颜色与默认车身背景颜色相同。当您想要“淡出”背景图像时，您可以在位于顶部的背景层中淡出，效果相同。您的CSS将类似于：

#background-overlay {

  background-color: #FFF;
  opacity: 0;
  transition: opacity 800ms;

  position: fixed;
  z-index: -10000;
  width: 100%;
  height: 100%;

}

#background-overlay.show {
  opacity: 1;
}

然后在jQuery中添加
$（“#背景覆盖”）.addClass（'show'）
，当您想“淡出”主体背景时。
如果您选择使用图像标记，您可以获得类似的功能

background-size: cover;
background-position: center center;

通过这样做：

div.parent {
  position: relative;
  overflow: hidden;
}
img.child {
  position: absolute;
  top: -100%;
  right: -100%;
  bottom: -100%;
  left: -100%;
  margin: auto;
}

然后，您可以在
img
标记上转换不透明度，或者使用jQuery的
fadeIn
/
fadeOut
或任何东西

为了让这项功能真正发挥作用，您需要一个适当大的背景图像，否则您必须对图像没有延伸到页面的整个宽度感到满意。（假设容器与页面一样大，可以通过将宽度和高度都设置为100%来强制其拉伸，但这样会丢失类似于背景图像的行为，它只会拉伸/扭曲自身以填充容器。）

尝试运行此代码段并将其扩展到全屏，然后调整浏览器的大小：


html，正文{
宽度：100vw；
高度：100vh；
}
身体{
位置：相对位置；
溢出：隐藏；
}
img{
位置：绝对位置；
前-100%；
左-100%；
右图：-100%；
底部：-100%；
保证金：自动；
}
有趣的想法，克里斯，我会尝试应用这个方法，然后回复给你，让你知道它是否适合我。真的很感谢你的想法。嗨，克里斯，我同意你的想法，在新的背景覆盖中淡入淡出，但提供的css并没有复制我正在寻找的“背景图像”的css“覆盖”效果，而是在调整大小时扭曲图像。然而，下面的贡献者添加了一个解决方案，因此结合您的两种方法，我能够获得我所需要的效果。再次感谢！谢谢你，@cjl750，它适合我。我已经开始在我的代码中实现它，并且没有遇到什么大问题，Jquery现在能够顺利地淡入淡出。有没有办法调整图像的哪个部分显示在“调整大小”上的首选项？例如，假设我们希望您右侧的海象在窗口变窄时保持可见，认为这是图像中最重要的部分，无论窗口大小。@Dan in Austin是的，通过调整位置和边距值，您可以获得不同的效果。我已经编辑了我的答案，以显示如何在缩小浏览器尺寸时保持图像最右边的部分可见。另外，如果我或克里斯的答案最终适合你，一定要回来接受你决定的答案。嘿！在我的代码中使用此解决方案后重新登录，我已接受您的答案。然而，我发现我在高宽比的设备上有时会出现问题，比如在iPhone5和iPhone6上，或者在Galaxy Note3上，但在iPhone4上不会，至少根据我使用Chrome开发者工具所做的测试。奇怪的是，这似乎并不总是发生。有时图像只覆盖页面的一部分，窗口底部会出现不必要的溢出（来自上一个基础图像），有时则不会，而且效果很好。@Dan in Austin hmmmm。关于这个bug，仅仅根据这个描述很难说问题是什么或者修复了什么。我以前也曾让Chrome的设备预览在我身上突然出现，并显示出错误，关闭/重新打开它通常可以解决这个问题。但是，如果您一直看到问题，那么可能是代码或图片的纵横比有问题。傻瓜式的方法是使用一个足够大的图像，以任何屏幕大小始终覆盖整个屏幕。或者你也可以在手机上显示每幅图像的不同版本，这些图像经过特殊裁剪，更适合高而窄的屏幕。
div.parent {
  position: relative;
  overflow: hidden;
}
img.child {
  position: absolute;
  top: -100%;
  right: -100%;
  bottom: -100%;
  left: -100%;
  margin: auto;
}