这是我身体的CSS代码：
body {
padding: 0;
margin: 0;
background-image: url("../images/background.jpg");
background-repeat: no-repeat;
background-color: grey;
background-size: 100%;
}
我想要做的是使图像滚动得比页面上的其他内容慢，以产生简单的视差效果。我在网上看过，我见过的所有例子都比我想要的复杂得多。
答案 0 :(得分：61)
我偶然发现了这个我用纯CSS创建的视差速度的灵活性，我只是想指出所有这些人都是错的，纯粹的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）滚动得慢。）
以下是我在谷歌搜索中发现的一个演示，因为我知道那里有很多非信徒，永远不会说不可能：
http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
答案 1 :(得分：5)
你可以使用像这里这样简单的东西： HTML：
的CSS：
body {
min-height:4000px;
background-image: url("http://www.socialgalleryplugin.com/wp-content/uploads/2012/12/social-gallery-example-source-unknown-025.jpg");
}
h1 {margin-top:300px;}
JS：
(function(){
var parallax = document.querySelectorAll("body"),
speed = 0.5;
window.onscroll = function(){
[].slice.call(parallax).forEach(function(el,i){
var windowYOffset = window.pageYOffset,
elBackgrounPos = "50% " + (windowYOffset * speed) + "px";
el.style.backgroundPosition = elBackgrounPos;
});
};
})();
这是jsfiddle
答案 2 :(得分：3)
如果要应用高背景图像，请使用此JS：
(function () {
var body = document.body,
e = document.documentElement,
scrollPercent;
$(window).unbind("scroll").scroll(function () {
scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
body.style.backgroundPosition = "0px " + scrollPercent + "%";
});
})();
答案 3 :(得分：1)
同意使用css是不可能的，因为你必须计算图像和文档的高度比。 我也喜欢这种效果，这就是为什么创造简单的功能就是这样。这是函数及其对scroll事件的调用：
$(window).on('scroll', function() {
smoothBackgroundScroll("relative/image/url");
});
function smoothBackgroundScroll(imgsrc) {
function loadImageHeight(url, width) {
var img = new Image();
img.src = url;
if (width) {
img.width = width;
}
return img.height;
}
var dh, wh, ih, st, posy, backh, backw;
if (!this._smoothBackgroundScroll) {
var bcksize = $(document.body).css('background-size');
var bmatch = /(\w+)\s*(\w+)/.exec(bcksize);
if (!bmatch || bmatch.length < 3) {
backh = loadImageHeight(imgsrc)
} else {
backh = parseInt(bmatch[2]);
if (isNaN(backh)) {
backw = parseInt(bmatch[1]);
backh = loadImageHeight(imgsrc, parseInt(backw));
}
}
this._smoothBackgroundScroll = {
dh: $(document).height()
, wh: $(window).height()
, ih: backh
}
}
dh = this._smoothBackgroundScroll.dh;
wh = this._smoothBackgroundScroll.wh
ih = this._smoothBackgroundScroll.ih;
st = $(document).scrollTop();
posy = (dh - ih) * st / (dh - wh);
document.body.style.backgroundPosition = 'center ' + posy + 'px';
}
您可以在此处找到它以及示例和视觉说明图像和文档的真实情况：
答案 4 :(得分：1)
我意识到这是一个老问题，然而，我最近偶然发现了这个问题，并花了很多时间试图找到最好的工作代码。我找到的所有东西要么太复杂，要么没有落后很多，特别是在Chrome中。正如其他人所指出的，纯CSS无法解决问题，但我制作了自己的简单AngularJS指令来解决问题：
app.directive("paraBack", ['$window', function ($window) {
return function(scope, element, attrs) {
element.css("background-image", "url("+attrs.paraBack+")"); // Apply the background image with CSS
element.css("background-attachment", "fixed"); // Disable background scrolling
var max = Infinity;
var image = new Image(); // Create a JavaScript image so that the code below can be run when the background is loaded
image.src = attrs.paraBack;
image.onload = function () {
max = image.height - window.innerHeight; // Stop scrolling after the bottom of the picture is reached
var xOffset = -(image.width/2-window.innerWidth/2);
element.css("background-position-x", xOffset+'px'); // Horizontally align the background
}
var scrollHandler = function () {
var offset = Math.floor(this.pageYOffset*0.1); // Set background to scroll at 10% of scrolling speed
if (offset<max) {
element.css('background-position-y', '-'+offset+'px'); // If not the bottom of the image is reached, move the background (scroll)
}
};
angular.element($window).on('scroll', scrollHandler); // Set the defined scrollHandler function to be ran when user scroll
scope.$on('$destroy', function () {
angular.element($window).off('scroll', scrollHandler); // Unbind the function when the scope is destroyed
});
};
}]);
它可以在html中使用：
<body para-back="url/to/image">
如果您想查看其外观示例，可以访问this page。
答案 5 :(得分：1)
我知道这已经很晚了，但是我想知道它是否比上面的代码更容易工作，并且花费了我15分钟的生命。
这是我的代码：
document.getElementById("body").onscroll = function myFunction() {
var scrolltotop = document.scrollingElement.scrollTop;
var target = document.getElementById("main1");
var xvalue = "center";
var factor = 0.5;
var yvalue = scrolltotop * factor;
target.style.backgroundPosition = xvalue + " " + yvalue + "px";
}#main1 {
background-image: url(https://images.unsplash.com/photo-1506104489822-562ca25152fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9);
background-position: top center;
background-attachment:scroll;
background-size: cover;
height: 80vh;
width: 100%;
}
#placeholdersoyoucanscroll{
height:100vh
}<body id="body">
<main>
<div id="main1">
</div>
<div id="placeholdersoyoucanscroll">
</div>
</main>
</body>
答案 6 :(得分：0)
我还一直在寻找一种现代且直观的方法来调整背景滚动速度。您应该尝试受Spotify.com启发的Simple Parallax Scrolling jQuery Plug-in。
一旦将它附加到您的项目上，并伴随着一个大的图像，这就是设置它的许多方法之一。
HTML |在元素上设置容器和基本视差属性。
<main>
<section>Some Content Above it</section>
<div class="parallax-container" data-parallax="scroll" data-position="top" style="height: 80vh;"></div>
<section>Some Content Below it</section>
</main>
jQuery |在这里，您可以根据文档使用其他参数
function parallaxjs() {
$('.parallax-container').parallax({
imageSrc: '/<path-to-your-image>/<your-big-image>.jpg',
naturalWidth: 1071, //your image width value
naturalHeight: 500, //your image height value
bleed: 0,
});
}
(function () {
parallaxjs();
})($);
答案 7 :(得分：-3)