上面的线性渐变<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

I'm looking to add a gradient to the top of some independently scrolling tab content so the content isn't sliced off at the bottom of the tabs when you scroll up. The goal is to have the content fade to white behind the tabs above. How would I go about adding this gradient so that it lays above the tab content and achieves this effect in the best way? The images below better explain the effect I am going for:

Obviously I wouldn't want it covering up the first card but I figured I could resize it between the tabs and the card so no content is covered unless you scroll.

 <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

You can style the:before element for the div, something like:

div {
  position: relative;
}

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

Didn't test it, but something like this should work.