javascript - 视差背景揭示了图像的边缘和它后面的内容

Question

我刚刚开始考虑创建一个元素跟随鼠标移动的视差样式页面。

我已经看过一些教程，到目前为止我的效果可以正常工作，但是作为背景的图像已经变大了。

正常缩放:

正如您所看到的，图像的边缘被显露了，它后面不应该出现的内容也被显露了(下面会提到)

它应该是这样的:

并且正文图像应位于中心。

$(document).ready(function() {
  var strength1 = 50;
  var strength2 = 100;
  var strength3 = 200;
  $("html").mousemove(function(e) {
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = 1 * pageX * -1;
    var newvalueY = 1 * pageY * -1;
    $('.background').css("background-position", (strength1 / $(window).width() * pageX * -1) + "px " + (strength1 / $(window).height() * pageY * -1) + "px");
    $('.middleground').css("background-position", (strength2 / $(window).width() * pageX * -1) + "px " + (strength2 / $(window).height() * pageY * -1) + "px");
    $('.foreground').css("background-position", (strength3 / $(window).width() * pageX * -1) + "px " + (strength3 / $(window).height() * pageY * -1) + "px");
  });
});

.background {
  z-index: 1;
  position: absolute;
  background: url('pictures/switzerland.jpg') no-repeat;
  width: 100%;
  height: 100%;
}

.middleground {
  z-index: 2;
  position: absolute;
  background: url('pictures/ExploreOurPlanet.png') no-repeat;
  width: 100%;
  height: 100%;
}

.foreground {
  z-index: 3;
  position: absolute;
  background: url('http://placehold.it/350x350&text=Foreground');
  width: 100%;
  height: 100%;
  opacity: 0;
}

.content {
  z-index: 4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background"></div>

<div class="middleground-container">
  <div class="middleground"></div>
</div>

<div class="foreground">
  <div>Test text</div>
</div>

<div class="content">Cras nec massa non ex congue hendrerit eget nec lorem. Proin vestibulum ligula sit amet sapien pulvinar tincidunt. Suspendisse potenti. Nam dui velit, porttitor quis convallis eget, fringilla sit amet massa. Donec consectetur fringilla pharetra. Nam pellentesque
  odio arcu, at lacinia libero mollis a. Mauris quis blandit purus, id porttitor enim. Praesent finibus, nisl vitae porta consectetur, purus mauris eleifend odio, sed dignissim libero lorem in magna. Quisque lobortis enim et velit imperdiet, lacinia malesuada
  tortor facilisis.</div>

<script src="scripts.js"></script>

如前所述，我写了一些虚拟内容，但它出现在图像后面，在 CSS 中我有 .content 的 z-index 为 4，但它没有覆盖在顶部。

如何使图像不那么放大但稍微拉伸(stretch)，以便在移动鼠标时看不到边缘？

从“探索地球”文本中提取当前图像下方的内容的最佳方式是什么？

Answer 1

通过设置将背景图像覆盖到视口(viewport): 背景尺寸:封面； 背景位置:50% 50%；

对于每张图片，降低内容的 z-index，如 CSS 中的 0 或 -1。在 Mouseover 中，背景位置将根据您的 JS 发生变化

如果你不想看到边缘， 使用变换:scale(x); above 1 遍历视口(viewport)上方的图像，但保持纵横比