线性渐变实现蒙版遮罩

线性渐变、背景尺寸、定位、混合模式综合实现蒙版遮罩

实现CSS3主要属性：

background: linear-gradient( dir, color1, color2,...); //先定义一个线型渐变
background-size: 400% 400%; // 把线型渐变扩大，默认可视盒子的颜色就是线性渐变其中的一部分颜色
transition: .5s all; //增加过渡效果

//:hover的时候运用定位将可视盒子定位到线性渐变其他颜色部分
:hover{
      background-position: 100% 100%;  
    }
    
图片的透明处理：
opacity: .5; //为了给底层图片增加透明效果
mix-blend-mode:  screen; //透明效果会出现多层透明，运用混合模式解决

/*混合模式(mix-blend-mode)：该属性的作用是将一个元素同其父标签的元素发生混合*/
属性值：
            /*mix-blend-mode: normal;          /*正常*/
            /*mix-blend-mode: multiply;        /*正片叠底*/
            /*mix-blend-mode: screen;          /*滤色*/
            /*mix-blend-mode: overlay;         /*叠加*/
            /*mix-blend-mode: darken;          /*变暗*/
            /*mix-blend-mode: lighten;         /*变亮*/
            /*mix-blend-mode: color-dodge;     /*颜色减淡*/
            /*mix-blend-mode: color-burn;      /*颜色加深*/