<!-- 使用前提: 图片的底色为白色,主色为黑色 -->
<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.