Javascript 背景附件固定替代方案

我刚刚遇到一个问题，我在同一页上有两个英雄图像部分，我必须在它们上使用

背景附件：修复了
。不用说，大多数浏览器的滚动速度都很慢（看看你的IE）。所以性能不是很好。哦，这个网站也有一些视差滚动元素（带有stellar.js）
使用平滑滚动（用于：nicesroll.js）。当然，我把图像尽量缩小，尽量不使用
背景尺寸：封面
（再次使用性能）。
哦，我在core.js文件中使用了
window.requestAnimationFrame（）
（再次显示性能）

有没有办法让这两个英雄部分的图像像
背景图像：固定的那样工作

index.html

<div class="first-hero">

</div>
<div class="content">
    .
    .
    lots of parallax content goes here
    .
    .
</div>
<div class="second-hero">

</div>

在第二个hero CSS语句中，请尝试以下操作：

.second-hero{
   background: transparent url('image2.jpg') no-repeat;
   background-attachment: fixed bottom;
   height:350px;
   width:100vw;
}

历史上，
背景附件：固定始终存在性能问题。我建议用一个
位置来代替它：fixed元素

然后，您可以使用
transform:translateZ（0），使固定背景和可滚动内容部分位于GPU中各自的层上-这将提供额外的性能增益

小提琴：

您是否尝试过将背景图像div包装到另一个中以查看它是否有帮助？@Toxide82是的。试过了。没有为我工作。你在CSS中拼错了“attachement”，应该是“attachment”。。。不确定这是在您的代码中还是就在这里：）@Toxide82我只是在流中写在这里。相信我，你不想看到这里有这么大的“文字墙”，但我会马上纠正它。谢谢不用担心，我在下面添加了一个答案-我将编辑该部分。当包含背景图像的元素也需要在视图中滚动时，这似乎不是一个解决方案，这是目前非常流行的需求。这是真的——这种效果可以通过性能的方式实现，但不是那么直接。如果需要，我可以提供一个例子。
.second-hero{
   background: transparent url('image2.jpg') no-repeat;
   background-attachment: fixed bottom;
   height:350px;
   width:100vw;
}

.fixed-background{
  position:fixed; 
  left:0;
  top:0;
  right:0;
  bottom:0;
  background:url(https://unsplash.it/1000/1000?image=1080);
  background-size:cover;
  background-position:center center;
  z-index:0;
}

.content{ position:relative; z-index:1; color:white; font-size:22px; line-height:32px; font:serif; padding:80px; }


.fixed-background, .content{
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  -moz-transform:translateZ(0);
}