让一个元素与另一个元素共享背景？答案

【问题标题】：Getting an element to share a background with another element?让一个元素与另一个元素共享背景？
【发布时间】：2020-10-05 05:24:20
【问题描述】：

我有一个样式如下的文档：

<div class = 'page'>
  <header class = 'site-header'>
  <div class = 'main-navigation-container'>
      ...
  </div>
  </header>
</div>

header 有一个不错的background-image。但是，一旦header 结束，我们就会到达导航栏，其中有一个股票蓝色选项。我想让header 背景“溢出”到 .main-navigation-container，因此它看起来好像 .main-navigation-container 包含在 header 中。

这是一个想法：

Before

正如您在前面看到的，导航容器（菜单）不与标题共享背景。但是，更改后应如下所示：

After

请注意，菜单现在已更改为位于标题中。问题在于我使用 Wordpress 作为后端，所以我不得不将 javscript 添加到正文中，而不是手动重新定义 html 元素：

<script>
  var nav = document.getElementsByClassName("main-navigation-container")[0];
  document.getElementsByClassName("site-header")[0].appendChild(nav);
</script>

当我在本地机器上使用测试文档时，这种方法有效，但在 Wordpress 中无效。有人对我如何使用我目前使用的方法或完全不同的方法解决我的问题有任何建议吗？

谢谢。

编辑：已解决：这是文档流程的问题。当您在 wordpress 中添加自定义 javascript 时，它们会为您提供两个脚本位置选项：正文和页脚。我以为我需要将脚本放在正文中，但是当我尝试将脚本移动到页脚时它起作用了。

【问题讨论】：

您能再添加一些代码吗？似乎您的主导航实际上包含在标题中（您试图使其看起来像）。如果很难找到单词，也许你可以展示它应该是什么样子的图像。而且 CSS 会很好，因为您的问题与样式表相关。
如果我理解您的问题，您可能会遇到竞争条件，即在文档完全加载之前分配变量。尝试将您的代码包装在 window.onload 函数中，或者如果您有可用的 jequery，请使用 $(document).ready(function() { ... })

标签： javascript css wordpress

【解决方案1】：

您可以使导航的背景透明。您可以将自定义类“bg-custom”添加到“main-navigation-container”，然后在您的 CSS 样式表中添加：

.bg-custom: {
    background-color: transparent;
}

或将其添加到“样式”标签内：

style="background-color: transparent;"

【讨论】：

这不起作用。当我这样做时，我得到一个全白背景，因为导航元素不包含在站点标题中。
写成background-color: transparent会更好。
@drakzuli 根据您的代码，“主导航容器”肯定包含在“站点标题”中。在没有看到更多代码的情况下无法提供更多帮助，但我建议（基于共享的 imgs）将“站点标题”部分设置为：min-width: 100vw; 和 min-height: 75vh;。这可能会解决你的一些问题。不要忘记使用浏览器中的 FireFox 或 Chrome Dev 工具检查您的布局，以确保您为所有元素提供了足够的空间。否则，它将替换应该适合的元素。