Question

我在页面底部有一张名为1的背景图片。我想在背景图像2的底部5％上方显示另一个名为1的背景图像的div（因此，不是屏幕底部的30％，而是图像底部的30％）。

但是，我对此做出响应有问题。我想我需要以某种方式计算比率，但我不知道如何。请参阅下面的代码。每当您调整屏幕大小时，背景图像1的大小都会改变，并且背景图像2的位置不会保持不变。无论如何，如何使它固定在一个点上？

JSFiddle：here

Answer 1

尝试一下。它似乎符合您的要求并且反应灵敏。

$(document).ready(heroResize);
$(window).on('resize', heroResize);

function heroResize() {
  var marginTop = $(window).height() * 0.8;
  $('#layer2').css('margin-top', marginTop);
}

#content {
  position: relative;
}

.layer {
  width: 100%;
  height: 100vh;
  max-height: 1000px;
}

#layer1 {
  background: url('https://cliffsliving.com/wp-content/uploads/2018/02/CLIFFS_DevilsCourthouse_Shoot_2017_3740_cmyk_brighter_PJ.jpg') center top/contain no-repeat #6DB3F2;
  position: absolute;
  top: 0;
  left: 0;
}

#layer2 {
  position: absolute;
  bottom: 0;
  left: 0;
  background: url('https://www.pngtube.com/myfile/full/9-93924_png-parallax-background-png.png') center bottom/contain repeat-x;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="content">
    <div id="layer1" class="layer">
      <div id="layer2" class="layer"></div>
    </div>
  </div>
  <div id="footer"></div>
</div>

Answer 2

我不确定我是否正确理解了您的问题，但是我想您希望将layer2包裹在layer1中，然后使用absolute和bottom位置：0，因此它始终固定在底部，并且相对于父级放置（在这种情况下，将是第1层）。

Answer 3

您可以使用一个元素，多个背景和vw单元来执行此操作，而无需使用JS。诀窍是值0.877vw等于5% * height of the image，并且图像的比率等于5.7，其宽度就是窗口大小，所以100vw。然后，我们将得到：0.05 * (100vw/5.7) = 0.877vw

body {
  margin:0;
}

.layer{
  height:100vh;
  min-height:60vw;
  background:
    url('https://www.pngtube.com/myfile/full/9-93924_png-parallax-background-png.png') 
     bottom,
    url('https://cliffsliving.com/wp-content/uploads/2018/02/CLIFFS_DevilsCourthouse_Shoot_2017_3740_cmyk_brighter_PJ.jpg') 
     bottom 0.877vw center;
   background-size:contain;
   background-repeat:no-repeat;
}

<div class="layer"></div>

计算背景图像比率

3 个答案: