CSS 视差效果拉伸我的背景图片

Question

在过去的几周里，我一直在为我正在构建的个人资料页面上的一个部分的视差效果而苦苦挣扎。

在这个部分，我有三个 4 列 div。第一个 div 包含我的文本，第二个 div 包含一个大背景图像，第三个 div 包含两个较小的背景图像。

我将 background-attachment: fixed; 添加到三张图片，虽然它与第二张 div 中的大图片配合得很好，但另外两张图片得到了伸展得面目全非。这是我现在的 CSS 样式：https://codepen.io/snailssnooze123/full/BmPxgN/

#about-bg-selfie {
  background-image: url("https://www.dropbox.com/s/aqf4nj496qeg0db/alleyPic.JPG?raw=1");
  height: 500px;
  width: 300px;
  background-repeat: no-repeat;
  background-position: center;    
  background-size: 35%; 
  background-attachment: fixed;
  border-top: 500px solid transparent;
  border-left: 90px solid #fff;
  margin-left: 60px;
  padding-right: 250px;
}

#about-bg-pyramids {
  background-image: url("https://www.dropbox.com/s/savr06trk2onj2c/pyramids.jpg?raw=1");
  min-height: 250px;
  width: 350px;
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#about-bg-temple {
  background-image: url("https://www.dropbox.com/s/twatj0fumugvrbg/temple.jpg?raw=1");
  height: 240px;
  width: 350px;
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: 10px;
}

这是我希望右边的图片看起来像，只有视差效果：https://codepen.io/snailssnooze123/full/LOBmgB/。

几天来我一直在研究代码，但无法让它工作。谁能帮我解决这个问题？恐怕我一定错过了一些非常明显的东西:)

Answer 1

我找到问题所在了。你必须从“#about-bg-pyramids”和“#about-bg-temple”中删除它 css :

background-attachment: fixed;

CSS 视差效果拉伸我的背景图片

CSS Parallax Effect Stretching out my Background Images

html

css

parallax

custom-scrolling