时间戳

首页 > 解决方案 > 让一个元素与另一个元素共享背景？

javascript - 让一个元素与另一个元素共享背景？

问题描述

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

<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-containerheader

这是想法：

前

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

后

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

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

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

谢谢。

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

标签： javascriptcsswordpress

解决方案

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

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

或将其与“样式”标签内联：

style="background-color: transparent;"

推荐阅读