HTML / CSS - 兩個具有單個漸變背景但只有一個粘性元素的div

Question

我有一個問題讓我感到沮喪。 場景是：

我有兩個div。 頂部div是一個橫幅（僅包含徽標）。 底部div是導航欄，包含一些圖標作為鏈接和下拉列表。

我想要以下兩件事：

1. 在兩個div上具有一致的線性漸變背景
2. 在底部，導航欄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>