$img: 'https://user-images.githubusercontent.com/8554143/34240326-1cdeafd8-e648-11e7-8d69-f0da1b019316.png';

​

.pic {

    width: 200px;

    height: 200px;

    margin: 50px;

    text-align: center;

    font-size: 42px;

    line-height: 420px;

    float: left;

    background-image: url($img);

    background-size: cover;

}

​

.pic1 {

    background-image: url($img), linear-gradient(#f00, #f00);

    background-blend-mode: lighten;

    background-size: cover;

}

​

.pic2 {

    background-image: url($img), linear-gradient(#333, #333);

    background-blend-mode: lighten;

    background-size: cover;

}

​

.pic3 {

    background-image: url($img), linear-gradient(#f00, #00f);

    background-blend-mode: lighten;

    background-size: cover;

}