Question

我的项目中有一些关于视差背景的问题。我使用stellar.js因为它似乎很容易使用。现在我遇到了一些关于背景图像高度的问题。

您可以在此处查看当前问题：http://flyn.xyz/如果您使用Overwatch字符向下滚动到视差滚动背景。

这是html：

<div class="hero hero-inline" data-stellar-background-ratio="0.5" style="background-image:url(\' '. esc_attr($image) .' \');"></div>

这是css：

.hero {
width:100%;
background-color:black;
overflow:hidden;
background-origin:content-box;
background-position:center;
background-size:cover;
height:400px;
}

当我在桌面上全屏（1920x1080或1600x900）时，结果相当不错;但是一旦我调整了窗口的大小，视差效果会将背景图像“滚动太多”并且垂直地“越界”：Example

我尝试了一些但无法解决这个问题 - 如何获得可用的解决方案？当浏览器宽度变小以规避问题时，其他网站根本不会水平调整背景图像的大小，但我无法弄清楚如何实现这一点。

很高兴有任何建议， FLO

视差背景与stellar.js大小问题

0 个答案: