Question

我刚遇到一个问题，我在同一页面上有2个英雄形象部分，我不得不对它们使用background-attachement: fixed。不必说，大多数浏览器上的滚动速度非常慢（看着你的IE）。所以性能不是很好。哦，这个网站也有一些视差滚动元素（与stellar.js）使用平滑滚动（使用：nicescroll.js）。当然，我让图像尽可能小，尽量不要使用background-size: cover（再次表现）。哦，我在我的core.js文件中使用了window.requestAnimationFrame()（再次表现）。

有没有办法让这2个英雄部分图像像background-image: fixed一样工作？

的index.html

<div class="first-hero">

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

</div>

的style.css

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

Answer 1

从历史上看，background-attachment:fixed;一直存在性能问题。我建议使用position:fixed;元素而不是这个。

然后，您可以使用transform:translateZ(0);使固定背景和可滚动内容部分位于GPU中各自的图层上 - 这应该可以提供额外的性能提升。

小提琴：https://jsfiddle.net/gstnr9w5/1/

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

Answer 2

在你的第二个英雄CSS声明中尝试以下内容：

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

背景附件固定替代品

2 个答案: