缩放时如何将视差背景居中 stellar.js

Question

我在使用视差背景图片时遇到了一些问题。

我正在与 this template 合作。如您所见，在主页中有 2 个 div 利用 stellar.js（即 .fh5co-cover 和 #fh5co-started）。在计算机分辨率下一切似乎都很好，但如果我尝试以 Phone 分辨率可视化网站（例如，通过 Chrome 模拟 iPhone7 Plus 渲染），[=12= 中的背景图像] 不居中。此外，#fh5co-started 中的背景图像会在您滚动页面时显示灰色边框。

有没有一种方法可以使背景图像居中并避免在小分辨率下出现那些恼人的灰色边框？

Answer 1

将背景位置 x 设置为 50%：

background-position-x: 50%;

在这里：

@media screen and (max-width: 768px)
.fh5co-cover {
    heifght: inherit;
    padding: 3em 0;
    background-position-x: 50% !important;
}

PD：important! 因为无论您使用什么插件，js 中的位置都会被更改。

关于灰色边框，找不到它所以我想这只是您浏览器的一个错误

缩放时如何将视差背景居中 stellar.js

How to center parallax backgrounds with stellar.js when scaling

html

javascript

css

stellar.js