如何在滚动容器中创建渐变叠加？答案

【问题标题】：How can I create a gradient overlay in a scrolling container?如何在滚动容器中创建渐变叠加？
【发布时间】：2018-08-08 06:45:44
【问题描述】：

我在一个可滚动的容器上有一个覆盖。当我滚动时，它似乎会粘在其中的内容上。如何保持元素底部的渐变？

.content__conatiner {
             position: relative
             height: 500px;
}

.content__container:after {
            content: " ";
             position: absolute;
             left: 0;
             right: 0;
             bottom: 0;
             top: 0;
             background: -moz-linear-gradient(top, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%);
             /* FF3.6+ */

             background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(137, 255, 241, 0)), color-stop(100%, rgba(0, 0, 0, 1)));
             /* Chrome,Safari4+ */

             background: -webkit-linear-gradient(top, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%);
             /* Chrome10+,Safari5.1+ */

             background: -o-linear-gradient(top, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%);
             /* Opera 11.10+ */

             background: -ms-linear-gradient(top, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%);
             /* IE10+ */

             background: linear-gradient(to bottom, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%);
             /* W3C */
        }

示例：https://codepen.io/hellojessicagraham/pen/jpepMv

【问题讨论】：

你能提供它的小提琴吗？
codepen.io/hellojessicagraham/pen/jpepMv @YashwardhanPauranik
当 div 滚动时，您是希望在滚动过程中始终看到底部的渐变，还是要将渐变放在底部以便只有在到达 div 的底部时才能看到它？跨度>

标签： css sass linear-gradients

【解决方案1】：

将另一个容器添加到主容器，并使伪元素相对于它定位（移动position:relative）

body {
  background: black;
}
div.container {
  position: relative;
  display:inline-block;
}
div.box {
  height: 500px;
  width: 500px;
  overflow-y: scroll;
}

div.box p {
  color: white;
}

div.box:after {
  content: " ";
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(137, 255, 241, 0) 0%, black 100%);
}

<div class="container">
  <div class="box">
    <p>
      Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus.
      In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat.
      Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer
      vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla
      mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam
      quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus.
      In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat
      volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel
      leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius
      semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra
      vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero.
      Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam
      erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla
      vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius
      semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra
      vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero.
      Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam
      erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla
      vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius
      semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra
      vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero.
      Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.
    </p>
  </div>
</div>

【讨论】：