【青山学css】如何用css实现抖音直播评论区透明渐变效果

今天在看抖音直播的时候，忽然发现一点好玩的东西，那就是抖音直播评论区，评论从半透明到显示，又从显示到逐渐消失的，是如何实现的

这个效果突然就引起了我的注意，毕竟我是个又菜又爱玩的css菜鸟，看到好玩的效果就想去实现。于是乎只能到百度和谷歌上到处搜索，但是就是找不到相关的解决方法，不知道是不是我搜的姿势不对还是没有人写过相关文章，无奈之下只能自己进行摸索。

方案一：background-clip

首先，你看到这个效果的第一步，想到的是什么，是渐变！对不对？我想的也是，css3支持背景渐变，也支持从颜色到透明的渐变，这个几乎每个人都知道，但是好像并没有什么卵用啊，我们需要让文字跟着背景颜色的显示而显示，根据背景颜色的消失而消失，简而言之就是，有背景颜色的地方才有字！这时候是不是一个css属性在你脑子里跃跃欲试？它就是 background-clip:text ，background-clip的作用正如他字面意思一样——背景裁切，那我们用文字把背景颜色裁切下来不就好了吗？有颜色的地方进行裁切出来还是字，透明的地方裁切出来还是透明的，这不就好了吗？说干就干

怎么样，是不是效果差不多，但你如果也试试或者仔细想一想就会发现，这样子只是空有其表，光有架子不能用，为啥？因为它不能滚动……而且当内容为图文混杂排布的时候也没卵用，方案一彻底失败

方案二：mask

网上继续搜啊搜，终于搜到了我们需要的东西，那就是 mask，下面是浏览器对它的支持情况

那这个属性具体都可以用来干嘛呢，我们这里就不细说了，感兴趣的朋友可以去自己进行搜索，我们这里只讲一下我们需要用到的作用，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。这个属性就跟ps中的遮罩一样，让我们来决定遮罩下方的元素哪里显示哪里不显示，所以我们只要使用方案一的思路，加上mask属性，就可以轻松实现我们想要的效果了。下面为简单演示效果，我们也可以通过调整渐变的参数来实现不一样的效果。

  <div class="wrap">
    <p>测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试</p>
  </div>

html {
  background: rgb(6, 255, 255);
}
.wrap {
  height: 300px;
  overflow: auto;
  -webkit-mask: linear-gradient(#fff, transparent);
}