背景图像引导程序 4.0 顶部的导航栏答案

【问题标题】：Navbar on top of background image bootstrap 4.0背景图像引导程序 4.0 顶部的导航栏
【发布时间】：2020-08-31 19:38:26
【问题描述】：

我试图在 bootstrap 4.0 中让我的导航栏位于我的背景图像之上。我可以通过背景图像上的负边距顶部来做到这一点，但如果我对我的网站进行更改，这并不容易。

HTML：

<div class="masthead">
    <nav>
        <img src="https://test.io/wp-content/uploads/2019/02/testIO-logo-rgb-2.png" class="site-logo" />
    </nav>
</div>
<div class="container-fluid hero"> </div>

CSS：

.hero {
  height: 600px;
  background-image: url(https://s17736.pcdn.co/wp-content/uploads/2019/03/asoggetti-318284-unsplash-1024x684.jpg);
  background-position: center center;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 15px;
}

nav {
  background: transparent;
  background-attachment: fixed;
  background-position: auto,center;
}

.site-logo {
  height: 64px;
}

JSFiddle

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 styles

【解决方案1】：

将display:relative; 用于父级div，将display:absolute; 和top:0; 用于子级（导航）。

每当您需要将徽标（常见用例）放在顶部而不使用负值时，然后使用 parent 和 child 的位置，如果没有父级，则 body 将是被视为父级，它将绝对定位到正文。

您不必使用负值，因为对于所有实例，绝对值将按预期适合图像。

fiddle 玩游戏。

.hero {
  height: 600px;
  background-image: url(https://s17736.pcdn.co/wp-content/uploads/2019/03/asoggetti-318284-unsplash-1024x684.jpg);
  background-position: center center;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 15px;
}

.masthead {
  display: relative;
}

nav {
  background: transparent;
  background-attachment: fixed;
  background-position: auto, center;
  position: absolute;
  top: 0;
}

.site-logo {
  height: 64px;
}

<div class="masthead">
  <nav>
    <img src="https://test.io/wp-content/uploads/2019/02/testIO-logo-rgb-2.png" class="site-logo" />
  </nav>
</div>
<div class="container-fluid hero"> </div>

【讨论】：