1、黑色纯色,背景白色的图片
.pic1 {
background-image: url($img), linear-gradient(#f00, #f00); //纯色渐变
background-blend-mode: lighten;
background-size: cover; //图片铺满屏幕
}
.pic3 {
background-image: url($img), linear-gradient(#f00, #00f); //渐变色渐变
background-blend-mode: lighten;
background-size: cover;
}
lighten这个混合模式:变亮、变亮模式与变暗模式产生的效果相反,黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式