<!-- 使用前提: 图片的底色为白色,主色为黑色 -->

<div class="g-flex">
    <div class="pic">原图</div>
    <div class="pic pic1">粉色</div>
    <div class="pic pic2">绿色</div>
    <div class="pic pic3">渐变</div>
</div>
$img: 'https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png';

.g-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100vw;
    justify-content: space-between;
    overflow: hidden;
}

.pic {
    flex: 0 0 200px;
    height: 200px;
    margin: 10px;
    text-align: center;
    font-size: 24px;
    line-height: 160px;
    background-image: url($img);
    background-size: cover;
    mix-blend-mode: difference;
    color: #fff;
}

.pic1 {
    background-image: url($img), linear-gradient(deeppink, deeppink);
    background-blend-mode: lighten;
    background-size: cover;
}

.pic2 {
    background-image: url($img), linear-gradient(yellowgreen, yellowgreen);
    background-blend-mode: lighten;
    background-size: cover;
}

.pic3 {
    background-image: url($img), linear-gradient(#f00, #00f);
    background-blend-mode: lighten;
    background-size: cover;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.