javascript - 如何使div的顶部和底部透明

Question

我正在制作一个内容比我想在高度上查看的内容长的 div，所以我使用了 20em 的高度，并制作了 overflow:scroll。这很好用，但我想给它添加一些效果。

我怎样才能使顶部和底部 50px 的不透明度为 0.7？所以当内容滚动“离开”时它会产生效果。

谢谢!

<div>
<ul>
   <li>long list here</li>
   <li>long list here</li>
   <li>long list here</li>
   <li>long list here</li>

</ul>

风格:

height:25em;
overflow:scroll;

Answer 1

DEMO

演示:

#wrapper {
    position: relative;
}
#wrapper:before, #wrapper:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 30px; /* Height of the effect */
}
#wrapper:before {
    top: 0;
    /* Use your background color, assuming white: */
    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}
#wrapper:after {
    bottom: 0;
    /* Use your background color, assuming white: */
    background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}
#mydiv {
    background: red;
    height: 20em;
    overflow: auto;
    border: 0 solid transparent;
    border-width: 10px 0; /* 10px to be able to read first and last lines */
}

<div id="wrapper">
    <div id="mydiv">
        Your content
    </div>
</div>