(CSS)使背景图像滚动比其他所有内容都慢 [英] (CSS) Make a background image scroll slower than everything else

问题描述

这是我的正文 CSS 代码:

here is is my CSS code for the body:

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

我想要做的是让图像滚动的速度比页面上的其他所有内容都慢，从而产生简单的视差效果.我在网上查了一下，我看到的所有例子都比我想要的复杂得多.

What I want to do is make it so that the image scrolls slower than everything else on the page to make a simple parallax effect. I've looked online and all of the examples I've seen are much more complicated than what I want.

推荐答案

我偶然发现这个是为了在我用纯 CSS 创建的视差速度中寻找更大的灵活性，我只想指出所有 这些人是错误的，使用纯 CSS 是可能的 也可以更好地控制元素的高度.

I stumbled upon this looking for more flexibility in my parallax speed that I have created with pure CSS and I just want to point out that all these people are wrong and it is possible with pure CSS It is also possible to control the height of your element better.

您可能需要稍微编辑您的 DOM/HTML 以获得一些容器元素，在您的情况下，您将背景应用于主体，这会限制您很多并且看起来不是一个好主意.

You will probably have to edit your DOM/HTML a bit to have some container elements, in your case you are applying the background to the body which will restrict you a lot and doesn't seem like a good idea.

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

以下是根据屏幕尺寸使用视口百分比长度控制高度的方法:

Here is how you control the height with Viewport-percentage lenghts based on screen size:

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) 慢).

Layer speed is controlled by a combination of the perspective and the Z translation values. Elements with negative Z values will scroll slower than those with a positive value. The further the value is from 0 the more pronounced the parallax effect (i.e. translateZ(-10px) will scroll slower than translateZ(-1px)).

这是我通过谷歌搜索找到的一个演示，因为我知道那里有很多非信徒，永远不要说不可能:

Here is a demo I found with a google search because I know there are a lot of non-believers out there, never say impossible:

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

这篇关于(CSS)使背景图像滚动比其他所有内容都慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！