Question

我正在寻找一种实现全尺寸响应式背景图像的方法，就像使用下面的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 */
}

我需要背景图片，然后当访问者点击＆＃34时进行游览＆＃34;按钮 - 使用Jquery实现，它还将新的html呈现到DOM中，包括要淡入的新背景图像。但是当我应用以下Jquery时，它无法实现平滑过渡，我相信因为background-image CSS属性不可动画（参见：w3schools，＆＃34; Animatable Properties＆＃34;：https://www.w3schools.com/cssref/css_animatable.asp）：

$(document).ready(function() {
  $(".button").click(function() {
    $("body").fadeOut(1200, function() {
      $("body").html('<body>/* new html goes here */ </body>').fadeIn(1200);
      setTimeout(fadeToPageThree, 6 * 1000); // sets timer for pg2 to pg3 transition
    }); // closes first page fadeOut
  }); // closes click handler
});

我一直尝试的解决方案是摆脱css背景图片，而是将我的背景图片作为标签放在html中。这解决了我的淡入淡出问题，因为Jquery可以处理这个img元素的淡入淡出，但它并没有给我上面的CSS应用的响应效果，无论宽度，高度，分钟的css样式如何-width等我试图应用于img。

任何见解都将不胜感激！

Answer 1

如果您使用图像标记的路线，您可以获得类似于

的功能

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, body {
  width: 100vw;
  height: 100vh;
}
body {
  position: relative;
  overflow: hidden;
}
img {
  position: absolute;
  top: -100%;
  left: -100%;
  right: -100%;
  bottom: -100%;
  margin: auto;
}

<img src="https://picsum.photos/1920/1080?image=1084" alt="">

您可以调整定位和边距的值，以便在缩小浏览器时缩小图像的效果。例如，如果我们想要在裁剪图像时保持图像的右侧部分可见，我们可以left: 0，right: 0，margin-left: auto，margin-right: 0。

html, body {
  width: 100vw;
  height: 100vh;
}
body {
  position: relative;
  overflow: hidden;
}
img {
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  bottom: -100%;
  margin: auto 0 auto auto;
}

<img src="https://picsum.photos/1920/1080?image=1084" alt="">

Answer 2

你可以翻转它 - 而不是淡出图像，淡化它上面的东西。您将图像保留为body上的背景图像，具有您喜欢的所有优点，并在其上添加固定的背景图层<div>，颜色与默认的正文背景颜色相同。当你想＆＃34;淡出＆＃34;在背景图像中，您可以在中淡化位于顶部的背景图层，效果将完全相同。您的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中，你只需添加$('#background-overlay').addClass('show')，当你想要淡出＆＃34;淡出＆＃34;身体背景。

复制CSS的效果＆＃34; background-image＆＃34; - 替代方法？

2 个答案: