Question

我有一个使我感到沮丧的问题。情况是：

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

我想要以下两件事：

在两个div上具有一致的线性渐变背景
底部navbar div的位置为：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>

Answer 2

我要做的是将两个div包裹在一个div中，以便将背景应用于该div。
我定义了一个名为content的新类，并以相同的方式命名div，因此您会更容易找到它。

我还提供了摘录供您试用。让我知道我是否正确理解了您。

#banner,
.navbar {
  padding: 5px 5px 5px 5px;
}

.navbar {
  position: sticky;
  top: 0;
}

.navbar li {
  display: inline;
}

.container {
  height: 1000px;
}

.content {
  background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}

<div id='content' class='content'>
  <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>
</div>

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

2 个答案: