这是我的CSS代码:

body {
  padding: 0;
  margin: 0;
  background-image: url("../images/background.jpg");
  background-repeat: no-repeat;
  background-color: grey; 
  background-size: 100%;
}

我想做的就是制作它,以便图像滚动比页面上的其他所有内容都慢,以制成简单的视差效果。我在网上看,我vue的所有示例都比我想要的要复杂得多。

答案

我偶然发现了这一点,以寻找我使用纯CSS创建的视差速度的灵活性,我只想指出这一切these people are wrong and it is possible with pure CSS也可以更好地控制元素的高度。

您可能需要对DOM/HTML进行一些编辑以具有一些容器元素,在您的情况下,您将背景应用到身体上,这将极大地限制您,并且似乎不是一个好主意。

http://keithclark.co.uk/articles/pure-css-parallax-websites/

这是您如何根据屏幕大小来控制视口度的长度的高度:

https://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

  .forefront-element {
    -webkit-transform: translateZ(999px) scale(.7);
    transform: translateZ(999px) scale(.7);
    z-index: 1;
  }

  .base-element {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }

  .background-element {
    -webkit-transform: translateZ(-999px) scale(2);
    transform: translateZ(-999px) scale(2);
    z-index: 3;
  }

层速度由透视图和Z翻译值的组合控制。负z值的元素比具有正值的元素滚动速度较慢。值越远来自0,视差效应越明显(即Translatez(-10px)比Translatez(-1px)滚动速度较慢)。

这是我在Google搜索中发现的演示,因为我知道那里有很多非信徒,从不说不可能:

http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

来自: stackoverflow.com