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

以下是我想要的右侧图片，只有Parallax效果：https://codepen.io/snailssnooze123/full/LOBmgB/。

我已经玩了几天的代码而无法让它发挥作用。任何人都可以帮我解决这个问题吗？我担心我必须遗漏一些非常明显的东西：）

Answer 1

我发现了什么问题。你必须从“＃about-bg-pyramids”和“＃about-bg-temple”css中删除它：

background-attachment: fixed;

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

1 个答案: