Question

我遇到了视差背景图片的一些问题。

我正在使用this template。如您所见，在主页中有2个div利用stellar.js（即.fh5co-cover和#fh5co-started）。计算机分辨率似乎都很好，但如果我尝试使用手机分辨率来显示网站（例如，通过Chrome模拟iPhone7 Plus渲染），则.fh5co-cover中的背景图像不会居中。此外，当您滚动页面时，#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对视差背景进行居中

1 个答案: