浅谈使用CSS遮罩与CSS线性渐变实现图片的斜线拼接

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%);
}