css mask的原理:只会把遮罩图里透明像素所对应的原图部分进行隐藏。
渐变图作为mask,置于另一张图片上面。
<div id="images">
<img src="images/img1.jpg">
<div id="mask"></div>
</div>
#mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("images/img2.jpg");
background-size: cover;
-webkit-mask-image: linear-gradient(120deg, transparent 50%, white 50%);
}