Question

我想把Opacity放在这个文本的底部，它应该在滚动时保持不变，但是当我滚动到最后它应该被看到。我怎么能这样做？

这是我的代码：


//html

large text goes here



//css

     #wrapper {
            height: 600px;
            width: 700px;
            overflow: auto;
            position: absolute;
            left: 25%;
              }

Answer 1

将此添加到#wrapper CSS：

-webkit-mask-image: -webkit-gradient(linear,left 20%,left bottom,from(black),to(rgba(0,0,0,0)))

Demo here

Answer 2

对于跨浏览器（Internet Explorer greater or equal than 10）解决方案，您可以执行以下操作：

<强> HTML

<div>
  content here
  <div class="overlay"></div>
</div>

<强> CSS

.overlay {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

滚动时文本底部的不透明度

2 个答案:

jsfiddle