Question

我在这里有一些用于视差滚动的代码，我想问一下在使用CSS滚动时是否可以以不同的速度移动图层（如this demo）？我尝试将@Value("${okta.issuer}") private String issuer; @Bean public OktaOAuth2Properties oktaOAuth2Properties() { OktaOAuth2Properties properties = new OktaOAuth2Properties(); properties.setClientId(clientId); properties.setIssuer(issuer); return properties; }更改为transform: scale(1)，但这在页面顶部留下了这个奇怪的白线。难道我做错了什么？还有什么我应该考虑的吗？

scale(1.1)

html {
  font-family: sans-serif;
  color: black;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0%;
  margin: 0%;
  background-color: black;
}

body {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow: unset;
  padding: 0%;
  margin: 0%;
  background-image: black;
  /*padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
  overflow-x: scroll;
  padding-bottom: 17px;
  box-sizing: content-box;
}

#layer1 {
  height: 100%;
  /* The image used */
  background-image: url('**PLACEHOLDER**');
  /* Full height */
  height: 800px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1);
}

#layer2 {
  /*border:2px solid black;
    border-radius: 5px;*/
  background-image: url("**PLACEHOLDER**");
  background-attachment: fixed;
  background-position: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 800px;
  align-content: center;
  transform: scale(1);
}

#layer3 {
  background-image: url("**PLACEHOLDER**");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 110%;
  height: 800px;
  align-content: center;
  transform: scale(1);
}

Answer 1

我找到了1个解决方案，但这并不是我想要的。我只是添加了一个锁定在页面顶部的标题栏，但是我只想保留图像。

有没有办法在滚动视差时移动图片

1 个答案: