HTML/CSS - 两个具有单一渐变背景但有一个粘性元素的 div

Question

我遇到了一个让我有些沮丧的问题。场景是:

我有两个 div。顶部 div 是横幅(仅包含 Logo )。底部 div 是导航栏，包含一些图标作为链接和下拉菜单。

我想要以下两件事:

1. 在两个div上有一致的线性渐变背景
2. 底部，导航栏 div 有 position:sticky，top:0，这样它滚动时保持在页面顶部。

我可以独立完成以上两项，但不能同时完成。有什么办法可以做到这一点吗？

CSS 和 HTML 的简化版本，具有粘性导航栏的版本，但渐变是每个 div，而不是从一个 div 开始并在另一个 div 结束:

#banner,
.navbar {
  background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
  padding: 5px 5px 5px 5px;
}

.navbar {
  position: sticky;
  top: 0;
}

.navbar li {
  display: inline;
}

.container {
  height: 1000px;
}

<div id="banner" class="Container-fluid">
  <div class="banner-row">
    <h1>Logo!</h1>
  </div>
</div>
<div class="navbar">
  <ul class="nav navbar-nav">
    <li><a href="/home/"><span>Home</span></a></li>
    <li><a href="/about/"><span>About</span></a></li>
    <li><a href="/contact/"><span>Contact</span></a></li>
  </ul>
</div>
<div class="container body-content">
  <h1>Content!</h1>
  <p>Stuff to fill a space.</p>
</div>

与此相反:

header {
  background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
  padding: 5px 5px 5px 5px;
}

.navbar {
  position: sticky;
  top: 0;
}

.navbar li {
  display: inline;
}

.container {
  height: 1000px;
}

<header>
  <div id="banner" class="Container-fluid">
    <div class="banner-row">
      <h1>Logo!</h1>
    </div>
  </div>
  <div class="navbar">
    <ul class="nav navbar-nav">
      <li><a href="/home/"><span>Home</span></a></li>
      <li><a href="/about/"><span>About</span></a></li>
      <li><a href="/contact/"><span>Contact</span></a></li>
    </ul>
  </div>
</header>
<div class="container body-content">
  <h1>Content!</h1>
  <p>Stuff to fill a space.</p>
</div>

Answer 1

您可以考虑在导航栏中使用一个伪元素，您可以在其中应用渐变着色并从顶部溢出它以覆盖横幅。您只需根据您的风格调整最高值。

#banner {
  padding: 5px 5px 5px 5px;
  position:relative;
  z-index:1;
}

.navbar {
  position: sticky;
  padding: 5px 5px 5px 5px;
  top: 0;
}
.navbar:before {
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  bottom:0;
  top:-100px;
    background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}


.navbar li {
  display: inline;
}

.container {
  height: 1000px;
}

<div id="banner" class="Container-fluid">
  <div class="banner-row">
    <h1>Logo!</h1>
  </div>
</div>
<div class="navbar">
  <ul class="nav navbar-nav">
    <li><a href="/home/"><span>Home</span></a></li>
    <li><a href="/about/"><span>About</span></a></li>
    <li><a href="/contact/"><span>Contact</span></a></li>
  </ul>
</div>
<div class="container body-content">
  <h1>Content!</h1>
  <p>Stuff to fill a space.</p>
</div>