视差背景揭示图像的边缘和内容

Question

我刚刚开始考虑创建一个视差样式页面，其中元素跟随鼠标。

我已经看过一些教程，到目前为止我已经有了效果，但背景的图像已经超大了。

正常缩放：

正如你所看到的那样，图像的边缘被揭示出来，而且背后的内容也不应该存在（进一步向下）

它应如下所示：

并且主文本图像应位于中心。

＆＃13;

＆＃13;

$(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");
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

如何使图像不是那么放大但略微拉伸所以当我移动鼠标时我不会看到边缘？

最好的方法是将图片中的内容放在＆＃34;探索地球＆＃34;文本？

Answer 1

通过设置将背景图像覆盖到视口： 背景尺寸：封面; 背景位置：50％50％;

对于CSS中的内容（如0或-1）的每个图像和较低的z-index。在Mouseover中，背景位置将根据您的JS

而改变

如果你不喜欢边缘， 使用transform：scale（x）;高于1以覆盖视口上方的图像但保持纵横比