javascript - 如何在文本上设置线性渐变？

Question

所以这就是我想要实现的:

(忽略蓝绿色单元格)

正如您所看到的，整个文本是模糊的，因为渐变应该覆盖在文本上。当您点击 READ MORE 按钮时，该元素应该一直到底部并移除渐变，而当您点击 READ LESS 时，它应该恢复到原来的状态。

现在的设计看起来不像我在代码中所做的设计，而我正是需要它。但是为了获得与设计中完全相同的东西，我的想法已经用完了。

有什么建议吗？

这是代码:

$(document).ready(function(){
    var toggleReadMore = function() {
      $('#read-more').click(function(e) {
          $(this).prev().animate({'height': $(this).prev()[0].scrollHeight + 'px'}, 400);
          $(this).hide();
          $(this).next('#read-less').show();
      });
      $('#read-less').click(function(e) {
          $(this).prev().prev().animate({height: '90px'}, 400);
          $(this).hide();
          $(this).prev('#read-more').show();
      });

    };
    toggleReadMore();
}());

#p {
  height: 50px;
  overflow: hidden;
}
#read-less {
 display: none;
}
#read-more,
#read-less {
  background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1));
  color: blue;
  cursor: pointer;
  position: absolute;
  bottom: -20px;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}

#wrapper {
  position: relative;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
  <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p>
  <div id='read-more'>
    READ MORE
  </div>
   <div id='read-less'>
    READ LESS
  </div> 
</div>

Answer 1

您可以通过 :after 状态、背景渐变和 z-index 实现这一点。

.masked{
  background: white;
  z-index: 1;
  position:relative;
}

.masked:after {
  content: "";
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  z-index: 2;
  background: -webkit-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
  background: -moz-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
  background: -o-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
  background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
}

这里是完全适合您需求的片段:https://jsfiddle.net/9bp1rc0e/1/