背景渐变

背景颜色的变化.

渐变是多个颜色逐渐变化的视觉效果.

一般用于设置盒子的背景.

background-image属性

1. 实现渐变语法

background-image：linear-gradient{
    颜色1；
    颜色2；
}

• 语法1：

  background-image：linear-gradient(
        transparent, /* 透明 */
        rgba(0, 0, 0, .6)
  );
  
  /* 等同 */
  
  background-image：linear-gradient(
        rgba(0, 0, 0, 0), /* 透明 */
        rgba(0, 0, 0, .6)
  );

• 语法2：

  background-image：linear-gradien(to bottom, red, green);
  /* 
  第一个参数设置渐变的方向:
  to bottom表示从上往下渐变，颜色由深变浅。其他方向同理。
  */

2. 举例

background-image: linear-gradient(to top,rgba(0,0,0,.8),transparent 50%);

• rgba(0,0,0, .8) : 颜色 内阴影

（设置盒子阴影是默认是盒子外阴影 ，但在背景渐变里面是盒子内阴影）

• to top : 阴影从下到上，颜色由深变浅，最后变为透明

• transparent 50% ：透明50%（不完全透明）

原图：

效果图：

• to top , transparent 50%

• to bottom , transparent 70%

• to left , transparent 50%