CSS背景图像与导航栏

Question

我有一段时间使用我的wordpress主题并制作它，以便我的第一个div的背景图像不会被导航栏剪掉。目前，图像的顶部正在菜单后面吃掉。我觉得因为无法工作而感到愚蠢。调整图像大小以添加空白空间可能会有所帮助，但如果可能的话，我宁愿尝试进行CSS修复。您可以在我http://www.cswu1611.org/home

的页面上看到当前正在发生的事情

Z-index似乎不起作用，绝对定位很麻烦，因为我需要它来保持响应。

（我知道我并不喜欢这个网站的结果，但在这一点上，客户是如此坚持和挑剔我必须尝试以这种方式工作）

作为参考，主题是来自theme.co的X，我已经联系过他们寻求支持，但他们的解决方案多次都很棒。

Answer 1

页面构建奇怪，我看到你没有编码，但无论如何，你走了：

.bg-image.parallax.man {background-position:center 70px}

Answer 2

那么你可以做一些事情来改善它。没有代码或小提琴，我无法帮助你，但我会尝试。

1. 减少导航栏的填充，使其不高
2. 使用background:rgba(#,#,#,0.5)使导航栏的灰色变得透明，其中＃是rgb值，0.5表示它具有0.5不透明度。
3. 让导航栏中包含position:absolute; top:0; 然后你transform:translateY(#) div，其中＃是导航栏的高度。

有不同的方法可以做到这一点，但没有小提琴，很难向你展示。

Answer 3

您可以更改图像上的背景位置。在最大尺寸下，您似乎有第一张图像的顶部条和导航的94px，因此将图像背景位置设置为background-position: 50% 94px;就可以了。当顶部栏滚动时，后续图像将为60px。

也就是说，如果导航高度发生变化，你必须对每个断点进行调整，这对于我来说是这样（对于第一个图像，顶部条形图包含在多行上，也可能是增量的）。