css 实现现直播聊天区域顶部渐变效果（转载）

拼搏现实的明天。 2022-12-27 12:53 155阅读 0赞

#### 转载于[https://blog.csdn.net/weixin\_43974907/article/details/105073061][https_blog.csdn.net_weixin_43974907_article_details_105073061] ####

关键词：顶部渐变/渐隐，-webkit-mask-image

简介：首先，关于这个文章的标题做一下说明，目的是要实现这个效果，但是在类web的应用领域专业术语叫【蒙版效果】，或者遮罩效果（了解css3的孩儿们提到“蒙版”是不是很简单了），至于为什么叫聊天区域顶部渐隐的效果，是因为度娘的搜索结果都是APP端的实现技术。。。绕远了~~~

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NDkwNw_size_16_color_FFFFFF_t_70][]

来吧，先上最终解决的代码，，，看完有笑点

-webkit-mask-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 15%,rgba(255,255,255,1) 100%);

就这一句就已解决，当然，熟悉web开发的要说，这个特性ie浏览器并不支持，对的，目前支持-webkit-mask-image的浏览器有：Chrome、Firefox 、Safari 、Opera，不支持的有IE。但是博主的这个功能是用在小程序上的，那么来科普一下小程序依赖的浏览器内核：emmm，可以用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NDkwNw_size_16_color_FFFFFF_t_70 1][]

我的漫漫踩坑之路就不讲了~~~

[https_blog.csdn.net_weixin_43974907_article_details_105073061]: https://blog.csdn.net/weixin_43974907/article/details/105073061
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NDkwNw_size_16_color_FFFFFF_t_70]: /images/20221120/31e95d9850a24456b6fdccd678dad1b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NDkwNw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200324154604818.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NDkwNw==,size_16,color_FFFFFF,t_70