0

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

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

我添加了背景附件：固定；到三个图像，虽然它适用于第二个 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/ 。

我已经玩了几天的代码，但无法让它工作。谁能帮我解决这个问题？恐怕我必须在这里遗漏一些非常明显的东西:)

4

1 回答 1

0

我发现了问题所在。你必须从 "#about-bg-pyramids" 和 "#about-bg-temple" css 中删除它：

background-attachment: fixed;
于 2017-11-26T22:38:35.183 回答