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

时间：2018-08-08 06:45:44

标签： css sass linear-gradients

我在可滚动容器上覆盖了一层。 当我滚动时，似乎会坚持其中的内容。 如何将渐变保留在元素的底部？

.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 */
        }

enter image description here

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

1 个答案:

答案 0 :(得分：2)

在主容器中添加另一个容器，并使伪元素相对于其定位（移动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>

相关问题
最新问题