收藏
回答

小程序如何实现聊天框边缘内容透明效果?

请教各位大神,图中绿线圈起来的这种效果挺常见的但是自己研究好久没有实现

回答关注问题邀请回答
收藏

2 个回答

  • Affection
    Affection
    04-08

    背景色渐变用linear-gradientradial-gradient函数

    04-08
    有用
    回复
  • 启年
    启年
    04-07

    整体背景色,左边黑色,右边红色

    下面绿色部分是scroll-view滚动容器,比如z-index 层级是1

    上面蓝色框的部分,是黑色和红色,渐变透明的背景,层级比 scroll-view 的层级高就可以,比如层级是2,这样文字就像是藏到蓝色渐变层的下面了


    不需要改变文字的透明度。

    04-07
    有用
    回复 2
    • 。。。。
      。。。。
      04-09
      感谢回复,后面红色和黑色是视频,不是固定的,不能写死
      04-09
      回复
    • 启年
      启年
      04-09回复。。。。
      自己调整吧用-webkit-mask-image: linear-gradient




      -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 15%, rgba(255, 255, 255, 1) 100%);
      04-09
      回复
登录 后发表内容