如何在滚动容器中创建渐变叠加层？
How can I create a gradient overlay in a scrolling container?
我在可滚动容器上有一个覆盖层。
当我滚动时，它似乎坚持其中的内容。
如何保持元素底部的渐变？
.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 */
}
在主容器中添加另一个容器并使伪元素相对于它定位（移动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>
我在可滚动容器上有一个覆盖层。 当我滚动时，它似乎坚持其中的内容。 如何保持元素底部的渐变？
.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 */
}
在主容器中添加另一个容器并使伪元素相对于它定位（移动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>