javascript - 背景附件固定但全尺寸图像

Question

我在这里尝试了解决方案：CSS background-size: cover + background-attachment: fixed clipping background images

和其他一些地方，但它们不太管用。顶部的JS解决方案：

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});

非常紧张，因为它不断地重新定位。另一个解决方案（那个responsive_calc）不起作用，我希望它居中。解决方案始终保持左对齐。

我基本上想要一个背景尺寸：封面；但固定附件。

只要滚动时不计算，基于 JS 的解决方案就可以了。

您可以在此处查看该问题的演示：https ://codepen.io/oscargodson/full/abZbZeE

它应该看起来像这样

但我明白了：

标签： javascripthtmlcssparallax

Answer 1

使用图像标签是可行的考虑object-fict和position:fixed

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.home-panel {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  height: 100vh;
}

.home-panel-media {
  height: 100vh;
  clip-path: inset(0); /* to clip the image to this div */
}

.home-panel-media img {
  height: 100vh;
  width: 50vw;
  position: fixed;
  top: 0;
  right: 0;
  object-fit: cover;
  object-position: top center;
}

<div id="wrapper">
  <div class="home-panels-wrapper">
    <div class="home-panel home-panel-1">
      <div class="home-panel-content">
        <h1>Hello World</h1>
        <p>
          Lorem ipsum dolar gamet
        </p>
        <p>
      </div>
      <div class="home-panel-media">
        <img src="https://i.pinimg.com/originals/a1/1e/2a/a11e2a9d5803e4dc2c034819ce12a16e.jpg">
      </div>
    </div>
    <div class="home-panel home-panel-2">
      <div class="home-panel-content">
        <h1>Hello World</h1>
        <p>
          Lorem ipsum dolar gamet
        </p>
        <p>
      </div>
      <div class="home-panel-media">
        <img src="https://images.squarespace-cdn.com/content/v1/56e05d74746fb93dcd805e8b/1553109528895-RYRDJLVNN61UDN65S59U/ke17ZwdGBToddI8pDm48kDmiacAi515_OfcChA6MRIQUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z23Oc3-AlX22j3PUzoYuTVI2MKzQWw7jmw4KYJnTQU-9E_twk1mUNduAk0T15_nZ7z/Tulsa-Headshot-Photographer_9639a.jpg?format=1500w">
      </div>
    </div>
  </div>
</div>