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

我有两个div。顶部 div 是横幅(仅包含徽标)。底部 div 是导航栏,包含一些图标作为链接和下拉列表。

我想要以下两件事:

  • 在两个 div 上具有一致的线性渐变背景
  • 底部,导航栏 div 具有位置:粘性,顶部: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>

    最佳答案

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

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

    关于HTML/CSS - 两个具有单一渐变背景但一个粘性元素的 div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52927818/

    10-09 15:36
    查看更多