上面的線性漸變<div>帶有 CSS 的標簽</div><div id="text_translate"><p>我希望在一些獨立滾動的選項卡內容的頂部添加一個漸變，這樣當您向上滾動時，內容不會在選項卡底部被切掉。 目標是讓內容在上面的選項卡后面淡化為白色。 我將如何 go 添加此漸變以使其位於選項卡內容之上並以最佳方式實現此效果？ 下面的圖片更好地解釋了我想要的效果：</p><p> <a href="https://i.stack.imgur.com/r6lEv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r6lEv.png" alt="我有這個"></a></p><p> <a href="https://i.stack.imgur.com/16qjM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/16qjM.png" alt="我要去這個"></a></p><p> 顯然我不希望它覆蓋第一張卡片，但我想我可以在選項卡和卡片之間調整它的大小，所以除非你滾動，否則不會覆蓋任何內容。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"&gt; &lt;div class="col-xs-12 col-sm-12 col-md-6"&gt; &lt;div class="row r-tabs"&gt; &lt;div class="tab-bar"&gt; &lt;button class="bar-item tab-active" onclick="openTab(event, 'section1')"&gt;Summary&lt;/button&gt; &lt;button class="bar-item" onclick="openTab(event, 'section2')"&gt;Images&lt;/button&gt; &lt;button class="bar-item" onclick="openTab(event, 'section3')"&gt;Contact&lt;/button&gt; &lt;button class="bar-item" onclick="openTab(event, 'section4')"&gt;Help&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="section1" class="tab-content"&gt; &lt;div class="card"&gt; &lt;div class="card-body model-btn-card"&gt; &lt;div class="viewing text-black"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p></div>

Question

我希望在一些獨立滾動的選項卡內容的頂部添加一個漸變，這樣當您向上滾動時，內容不會在選項卡底部被切掉。 目標是讓內容在上面的選項卡后面淡化為白色。 我將如何 go 添加此漸變以使其位於選項卡內容之上並以最佳方式實現此效果？ 下面的圖片更好地解釋了我想要的效果：

顯然我不希望它覆蓋第一張卡片，但我想我可以在選項卡和卡片之間調整它的大小，所以除非你滾動，否則不會覆蓋任何內容。

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <div class="col-xs-12 col-sm-12 col-md-6"> <div class="row r-tabs"> <div class="tab-bar"> <button class="bar-item tab-active" onclick="openTab(event, 'section1')">Summary</button> <button class="bar-item" onclick="openTab(event, 'section2')">Images</button> <button class="bar-item" onclick="openTab(event, 'section3')">Contact</button> <button class="bar-item" onclick="openTab(event, 'section4')">Help</button> </div> </div> <div id="section1" class="tab-content"> <div class="card"> <div class="card-body model-btn-card"> <div class="viewing text-black"> </div> </div> </div>

Answer 1

您可以為 div 設置：before 元素的樣式，例如：

div {
  position: relative;
}

div: before {
  content: '';
  top: -2px;
  left: 0;
  width: 100%;
  height: 15px;
  background: linear-gradient(to top, transparent, #fff);
}

沒有測試它，但這樣的東西應該可以工作。