线性渐变实现蒙版遮罩
线性渐变、背景尺寸、定位、混合模式综合实现蒙版遮罩 实现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