（CSS）使背景图像滚动比一切更慢 [英] (CSS) Make a background image scroll slower than everything else

问题描述

这里是我的CSS code对身体的：

here is is my CSS code for the body:

body {
padding: 0px;
margin: 0px;
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.

<一个href=\"http://keithclark.co.uk/articles/pure-css-parallax-websites/\">http://keithclark.co.uk/articles/pure-css-parallax-websites/

下面是你如何控制与视口百分比lenghts高度根据屏幕大小：

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

<一个href=\"https://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/\">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:

<一个href=\"http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/\">http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

这篇关于（CSS）使背景图像滚动比一切更慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！