CSS 背景图像与导航栏答案

【问题标题】：CSS background image versus navbarCSS 背景图像与导航栏
【发布时间】：2014-07-29 02:03:40
【问题描述】：

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

上查看当前正在发生的事情

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

（我知道我自己不喜欢该网站的发展情况，但在这一点上，客户如此坚持和挑剔，我必须尝试使其以这种方式运行）

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

【问题讨论】：

一般情况下，除非是设计选择，否则当页眉固定时，页面主体上的 TOP 内边距等于导航栏的高度。请参阅 GetBootstrap.com 的示例中的固定标头示例，单击 starter-template.css。这样，锚链接和其他东西就不会被它掩盖。

标签： jquery html css wordpress twitter-bootstrap

【解决方案1】：

页面构建的很奇怪，我看到你没有编码，但无论如何，你去吧：

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

【讨论】：

这个解决方案似乎有效，但是即使我设置了！important，HTML 似乎也会覆盖它。因此，如果我在开发人员工具中更改它并编辑 CSS，它会很好，但 wordpress 代码没有它。
把它放在你所有的 CSS 中。
我的 CMS 缓存，所以我倾向于在添加 css 或 js 后清除它，除非它被关闭。
认为这实际上得到了它。
可能只想定位整个包装器上父 div 的第一个子元素。它对所有人都这样做。

【解决方案2】：

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

减小导航栏的内边距，使其不那么高
使用background:rgba(#,#,#,0.5) 使导航栏的灰色稍微透明一点，# 表示 rgb 值，0.5 表示它的不透明度为 0.5。
使导航栏有一个position:absolute; 和top:0; 然后你 transform:translateY(#) 带有# 的 div 是导航栏的高度。

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

【讨论】：

是的，我知道它没有什么可做的，但我有点不知所措，因为我自己的 css 和主题之间的所有移动部分都需要摆弄，可视作曲家代码（由主题开发人员自定义构建以启动）我不知道从哪里开始。我会给这些尝试和想法。

【解决方案3】：

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

也就是说，如果导航高度发生变化，您必须对每个断点进行调整，这对我来说是目前所做的（对于顶栏环绕多行的第一张图像，可能会增加一些）。

【讨论】：