CSS3设置透明渐变背景

代码

先上代码：

.left-div {
    background-image: linear-gradient(
      to left,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.4) 10%,
      rgba(0,0,0,0.6) 40%,
      rgba(0,0,0,0.8) 60%,
      rgba(0,0,0,1) 100%);
  }

解释

rgba(x,x,x,x)：

  • 前三个值是rgb值，取值0-255之间，0表示最深（r是red,g是green,b是blue，也就是三原色）
  • 第四个值表示透明度，取值0-1之间，0表示完全透明，1表示完全不透明
  • rgba(x,x,x,x)后的%表示在背景中占的比例
  • to left表示渐变方向自右至左，可根据需求修改成to right、to top、to bottom、to left bottom、to right bottom等

效果

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。