代码

先上代码：

.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等

效果