淺談使用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%);
}